I have a path with various arcs. I want to animate just a single arc indefinitely. Currently, what I can do is this :
http://jsfiddle.net/gLxkt/1/
<animate id="c1" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 600 300 300 400 "
to="M 300 300 C 300 300 400 300 300 400 " dur="1s" fill="freeze" />
<animate id="c2" begin="c1.end" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 400 300 300 400 "
to="M 300 300 C 300 300 600 300 300 400 " dur="1s" fill="freeze" />
Which can do this once. How can I make the animation indefinite?
The end="indefinite" makes it repeat and the begin makes it start both at 0s and when the other animation finishes. Continuously repeats in Firefox.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
>
<path id="p1" d="M 300 300 C 300 300 600 300 300 400 " stroke="blue" fill="none" stroke-width="4" />
<g>
<path id="p1" d="M 300 300 C 300 300 600 300 300 400 " stroke="blue" fill="none" stroke-width="4" />
<animate id="c1" begin="c2.end; 0s" end="indefinite" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 600 300 300 400 "
to="M 300 300 C 300 300 400 300 300 400 " dur="1s" fill="freeze" />
<animate id="c2" begin="c1.end" end="indefinite" xlink:href="#p1" attributeName="d" attributeType="XML"
from="M 300 300 C 300 300 400 300 300 400 "
to="M 300 300 C 300 300 600 300 300 400 " dur="1s" fill="freeze" />
</g>
</svg>
An easy way is to use the "values" array - which works in Chrome, Firefox & Safari (and I presume Opera) but not IE which has no support for SMIL anyway (although there's a polyfill library somewhere). But Robert's answer is clearly more elegant.
<animate id="c1" xlink:href="#p1" attributeName="d" attributeType="XML"
values="M 300 300 C 300 300 600 300 300 400;M 300 300 C 300 300 400 300 300 400;M 300 300 C 300 300 600 300 300 400" dur="2s" repeatCount="indefinite" fill="freeze" />
http://jsfiddle.net/gLxkt/2/
Related
I'm trying to animate a triangle so that its rotation accelerates (and later comes to a stop after a full rotation) and I am trying to use the animateTransform SVG tag, with the calcmode attribute set to "spline".. I can easily get the triangle to rotate with a continuous motion, but it's not the smooth acceleration I'm looking for.
Here is the code I'm using - when viewing this in Firefox it shows no animation at all :
<svg xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
*{
fill:none;
stroke:black;
}
]]>
</style>
<g class="triangle">
<path d="M 349.9999999999999 163.3974596215561 L 200 250.00000000000006 " />
<path d="M 200 250.00000000000006 L 350 336.60254037844385 " />
<path d="M 350 336.60254037844385 L 349.9999999999999 163.3974596215561 " />
<animateTransform
attributeName="transform"
type="rotate"
from="0 300 250" to="360 300 250"
begin="0s" dur="10s"
repeatCount="indefinite"
calcmode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>
What am I doing wrong? Should I use CSS animations instead? Any kind of non-continuous rotation would be a win.
I tried various value combinations for the keyTimes / keySplines attributes, but the only result I got was a continuous rotation - for example, with
keyTimes="0; 1"
keySplines="0.5 0 0.5 1"
The SVG specification says:
For animations specified with a ‘values’ list, the ‘keyTimes’ attribute if specified must have exactly as many values as there are in the ‘values’ attribute. For from/to/by animations, the ‘keyTimes’ attribute if specified must have two values.
So we either need to reduce the number of keyTimes values or move to using values and then have a matching number of values.
I've set some example values below and the shape now rotates at various speeds.
html, body {
width: 100%;
height: 100%;
}
svg {
width: 100%;
height: 200%;
transform: translate(-100px, -130px);
}
<svg xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
path {
fill:none;
stroke:black;
stroke-width:10px;
}
]]>
</style>
<g class="triangle">
<path d="M 349.9999999999999 163.3974596215561 L 200 250.00000000000006 " />
<path d="M 200 250.00000000000006 L 350 336.60254037844385 " />
<path d="M 350 336.60254037844385 L 349.9999999999999 163.3974596215561 " />
<animateTransform
attributeName="transform"
type="rotate"
values="0 300 250;100 300 250;130 300 250;200 300 250;360 300 250"
begin="0s" dur="10s"
repeatCount="indefinite"
calcmode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>
I have to make svg animation with dashed line.
I want to draw a line along with the flow.
Or draw line first and if drawing is finish, start flow.
But I can only implement separately.
How can I animate it together?
Help please..
This is my code.
https://codepen.io/hyhong/pen/KKBpvKQ
.item1 .dashed {
stroke-dasharray: 10 7;
}
.item1 .path {
animation: draw 1.5s alternate linear forwards;
}
#keyframes draw {
from {
stroke-dashoffset: 364;
}
to {
stroke-dashoffset: 0;
}
}
.item2 .path {
stroke-dasharray: 10;
stroke-dashoffset: 100;
animation: flow 3s linear infinite;
}
#keyframes flow {
100% {
stroke-dashoffset: 0;
}
}
<!-- draw svg -->
<svg class="item1" width="700" height="700">
<defs>
<path
id="dashed" class="dashed"
d="M 280 270 L 470 410 L 410 460 L 450 490"
stroke-miterlimit="10"
fill="none"
stroke="white"
stroke-width="5"
></path>
<mask id="mask">
<use xlink:href="#dashed"/>
</mask>
</defs>
<path
class="path"
d="M 280 270 L 470 410 L 410 460 L 450 490"
mask="url(#mask)"
stroke-miterlimit="10"
fill="none"
stroke="#3835B9"
stroke-width="5"
stroke-dasharray="364"
stroke-dashoffet="364"
></path>
</svg>
<!-- flow svg -->
<svg class="item2" width="700" height="700">
<path
class="path"
d="M 280 270 L 470 410 L 410 460 L 450 490"
stroke-miterlimit="10"
fill="none"
stroke="#3835B9"
stroke-width="5"
></path>
</svg>
I don't get your question 100%. but SVG SMIL Animation can be used in a situation where you need to time the starting (and ending) of different animations using <animate>. So, here are three examples where I animate stroke-dashoffset.
In the first the animations are independent, the green just starts 2 seconds after the red. In the second example the green starts when the red ends. You can see that the begin attribute refer to the the id of the red. The same goes for the third example.
<p>Green begin 2s after red:</p>
<svg viewBox="0 0 250 10">
<path d="M 20 5 h 100" stroke="red" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;-100" dur="4s" fill="freeze"
repeatCount="1" />
</path>
<path d="M 120 5 h 100" stroke="green" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;0" dur="2s" fill="freeze"
repeatCount="1" begin="2s" />
</path>
</svg>
<p>Green begin when red ends:</p>
<svg viewBox="0 0 250 10">
<path d="M 20 5 h 100" stroke="red" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate id="a1" attributeName="stroke-dashoffset"
values="100;-100" dur="4s" fill="freeze"
repeatCount="1" />
</path>
<path d="M 120 5 h 100" stroke="green" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;0" dur="2s" fill="freeze"
repeatCount="1" begin="a1.end" />
</path>
</svg>
<p>Green begin 1s after red begin:</p>
<svg viewBox="0 0 250 10">
<path d="M 20 5 h 100" stroke="red" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate id="a2" attributeName="stroke-dashoffset"
values="100;-100" dur="4s" fill="freeze"
repeatCount="1" />
</path>
<path d="M 120 5 h 100" stroke="green" stroke-width="10"
stroke-dasharray="100" stroke-dashoffset="100" pathLenth="100">
<animate attributeName="stroke-dashoffset"
values="100;0" dur="2s" fill="freeze"
repeatCount="1" begin="a2.begin+1s" />
</path>
</svg>
You can use the values from the css in the SVG "animate" property. The CSS animation is looping the "stroke-dashoffset" values from 100 to 0. On the other hand it overrides the stroke-dasharray="10 7" to stroke-dasharray="10" without reason. So you can use the original "10 7" (10 pixel dash, 7 pixel gap) design, if you like to.
<svg width="250" height="250">
<path
d="M 30 10 L 220 150 L 160 200 L 200 230"
stroke-miterlimit="10"
fill="none"
stroke="#3835B9"
stroke-width="5"
stroke-dasharray="10"
stroke-dashoffset="1">
<animate
attributeName="stroke-dashoffset"
values="100;0"
dur="3s"
calcMode="linear"
repeatCount="indefinite" />
</path>
</svg>
I want to create an animation like this that revolves around the two shapes. And I want to achieve it in SVG with no external CSS. Can anyone help me out on how to do it?
This is my code
<svg xmlns="http://www.w3.org/2000/svg" width="542" height="542" viewBox="0 0 542 542">
<g id="svg" transform="translate(-655 -265)">
<circle id="Ellipse_3" data-name="Ellipse 3" cx="271" cy="271" r="271" transform="translate(655 265)" fill="none"/>
<path id="Path_1" data-name="Path 1" d="M818.25,412.875l.71.931c116.417,110.219-.023,204.664-.382,205.428-.045.089-.2.312-.375.672-2.758,5.713,3.239,3.015,3.594,2.858,147.217-64.969,210.869-212.39,210.672-213.249-.359-1.7-3.069-1.088-3.344-.781-4.366,4.893-81.574,88.727-207.317.617-.169-.118.317.2-.673-.473s-2.369-1.12-3.148-.181-.909,2.256.388,4.35" fill="none" stroke="#707070" stroke-width="1"/>
<path id="Path_2" data-name="Path 2" d="M927.651,569.319s69.788,5.194,99.3,51.994c.017.04,4.351,6.826,5.406-.172a1.6,1.6,0,0,0,.069-.516,5.747,5.747,0,0,0-.21-2.031c-3.036-7.836-31.037-76.552-54.932-98.845-.009-.009-35.627,38.007-49.635,49.57" fill="none" stroke="#707070" stroke-width="1"/>
<g id="Ellipse_1" data-name="Ellipse 1" transform="translate(655 496)" fill="#f90a2a" stroke="#000" stroke-width="1">
<circle cx="34.5" cy="34.5" r="34.5" stroke="none"/>
<circle cx="34.5" cy="34.5" r="34" fill="none"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
</g>
</g>
</svg>
If you load your file into a vector editor, we will see that the shapes are outside the SVG canvas.
Because of this, you were forced to use transform commands to bring the forms back to the custom viewport.
Practical advice
It is necessary to draw in a vector editor so that the shapes do not go beyond the boundaries of the SVG canvas.
After redrawing in a vector editor and cleaning the file:
To get a segment, use stroke-dasharray="251,1004",
where 251 -
dash, 1004 - gap
To animate the rotation, it was necessary, in addition to the angle,
to additionally specify the coordinates of the rotation center
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>
.container {
width:75vw;
height:auto;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg5" width="50%" height="50%" viewBox="0 0 542 542" >
<defs>
<linearGradient id="Lg" x1="0" x2="0" y1="1" y2="0">
<stop offset="0" stop-color="#DC143C" />
<stop offset="0.8" stop-color="white" stop-opacity="0.05" />
</linearGradient>
</defs>
<g id="g820" transform="translate(-658 -238)" fill="none" stroke="#707070" stroke-width="1">
<path id="Path_1" fill="black" stroke="black" d="m818 413 1 1c116 110 0 204 0 205l-1 1c-3 6 3 3 4 3a446 446 0 0 0 210-213c0-2-3-2-3-1-4 5-81 88-207 0h-4v4" data-name="Path 1" />
<path id="Path_2" fill="#DC143C" d="M928 569s69 6 99 52c0 0 4 7 5 0a6 6 0 0 0 0-2c-3-8-31-77-55-99 0 0-35 38-49 49" data-name="Path 2" />
</g>
<circle id="Ellipse_3" data-name="Ellipse 3" stroke="url(#Lg)" cx="266" cy="278" r="220" fill="none" stroke="#DC143C" stroke-width="45" stroke-dasharray="251,1004" stroke-linecap="round" >
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>
</circle>
</svg>
</div>
The experimental <sprite-meister> Web Component can generate the CSS for you
After cleaning up your SVG: no translates, no self-closing tags
You are left with the first frame of your animation
this is not SVG, but a String Template Literal you can program
Sprite-Meister generates the other steps=48 frames for you
the circlepath function calculates an x,y position for every frame
each <circle cx="${v1.x}" cy="${v1.y}" doesn't rotate the circle;
it draws the circle at different positions in each frame
and animates the generated SVG sprite-sheet with CSS
<script src="//sprite-meister.github.io/element.js"></script>
<script>console.log=()=>{/*don't bloat SO snippet console*/}</script>
<sprite-meister duration="5s" w="542" h="542" width="180px" steps="48">
${ setv1( circlepath({ radius:200 }) , "yellow circle position" )}
<text y="10%" font-size="50px">frame: ${framenr} </text>
<path fill="green" d="m163 158 1 1c116 110 0 204 0 205l-1 1c-3 6 3 3 4 3a446 446 0 0 0 210-213c0-2-3-2-3-1-4 5-81 88-207 0h-4v4m105 150s69 6 99 52c0 0 4 7 5 0a6 6 0 0 0 0-2c-3-8-31-77-55-99 0 0-35 38-49 49"></path>
<circle cx="${v1.x}" cy="${v1.y}" r="34" fill="yellow" stroke="blue"></circle>
</sprite-meister>
Sources:
https://dev.to/dannyengelman/create-svg-spritesheet-animations-with-1-template-literal-string-3hee
https://sprite-meister.github.io/
https://sprite-meister.github.io/documentation.html
<sprite-meister> is NOT version 1.0
You need a decent amount of SVG knowlegde, and learn (at least the basics) of SVG SMIL animations first, so you understand the difference with sprite-sheet animations
I have a piece of svg code that links an animation to a simple path and that works well :
<path id="p0" d="M 110,150 C 300,80 400,300 450,100 500,-100 -90,220 110,150"
stroke="black" fill="none" stroke-width="1" />
<ellipse rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze"
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</animateMotion>
</ellipse>
Now I need to have the same animation on an animated path. I tried the following :
<path id = "p0" stroke = "black" stroke-width = "1" fill = "none" >
<animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 100 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200" />
</path>
<ellipse rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze"
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</ellipse>
But to no avail : the ellipse doesn't follow the path and remains invisible...
Any idea ? Is it at least possible ?
Thanks in advance.
EDIT : I just noticed that it works on Firefox, but the problem is that it links the ellipse to the first part of the path values only; in other words it doesn't follow the path animation... :(
If you give the path a valid d attribute, it seems to work in Chrome.
<svg width="500" height="500">
<path id = "p0" stroke = "black" stroke-width = "1" fill = "none"
d="M 100 200 C 100 150 250 150 100 100 C 0 50 100 400 100 200">
<animate attributeName="d" dur="2s" repeatCount="indefinite" values=
"M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 100 100 200;
M 100 200
C 100 150 250 150 100 100
C 0 50 100 400 100 200" />
</path>
<ellipse rx="20" ry="12" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8">
<animateMotion id="One" dur="10s" fill="freeze"
rotate="auto" repeatCount="indefinite" >
<mpath xlink:href="#p0"/>
</animateMotion>
</ellipse>
</svg>
i'd like to control the interpolation of a path animation in svg, but i can only get it working with linear interpolation. I've create this code pen as a simple example:
http://codepen.io/adamdaly/pen/yzhCm/
As you can see the black path is animating correctly using linear interpolation, but the red line that is set up for non-linear isn't animating. How should this work?
Adam
You have a couple of issues which cause the animation to be in error and so be ignored.
There must be exactly as many keyTimes entries as values.
There must be one fewer keySplines entry than keyTimes entries
You aren't following these rules and so the animation is in error. Here's one way to correct things...
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="100%" height="100%">
<path d="M100 200 c0,-100 200,-100 200,0" stroke="#000000" stroke-width="4" fill="none">
<animate
dur="2"
repeatCount="indefinite"
attributeName="d"
from="M100 200 c0,-100 200,-100 200,0"
to="M100 200 c0,-100 200,-100 200,0"
values="M100 200 c50,-100 250,-100 200,0; M100 200 c-50,-100 150,-100 200,0; M100 200 c50,-100 250,-100 200,0">
</animate>
</path>
<path d="M100 200 c0,-100 200,-100 200,0" stroke="#FF0000" stroke-width="4" fill="none">
<animate
dur="2"
repeatCount="indefinite"
attributeName="d"
from="M100 200 c0,-100 200,-100 200,0"
to="M100 200 c0,-100 200,-100 200,0"
values="M100 200 c50,-100 250,-100 200,0; M100 200 c-50,-100 150,-100 200,0; M100 200 c50,-100 250,-100 200,0"
keyTimes="0; 0.5; 1"
keySplines="0.25 0 0.75 1; 0.25 0 0.75 1"
calcMode="spline">
</animate>
</path>
</svg>