SVG Animation
SVG Animation
SVG elements can be animated.
In SVG, we have four animation elements which sets or animates SVG graphics:
-
<set>
-
<animate>
-
<animateTransform>
-
<animateMotion>
SVG <set>
The <set>
element sets the value of an attribute for a specified duration.
In this example, we create a red circle that starts with a radius of 25, then after 3 seconds the radius will be set to 50:
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" style="fill:red;">
<set attributeName="r"
to="50" begin="3s" />
</svg>
Try it Yourself »
Code explanation:
- The
attributeName
attribute in the<set>
element defines which attribute to change - The
to
attribute in the<set>
element defines the new value for the attribute - The
begin
attribute in the<set>
element defines when the animation should start
SVG <animate>
The <animate>
element animates an attribute of an element.
The <animate>
element should be nested inside the target element.
In this example, we create a red circle. We animate the cx attribute from 50 to 90%. This means that the circle will go from left to right:
Here is the SVG code:
Example
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" style="fill:red;">
<animate
attributeName="cx"
begin="0s"
dur="8s"
from="50"
to="90%"
repeatCount="indefinite" />
</circle>
</svg>
Try it Yourself »
Code explanation:
- The
attributeName
attribute defines which attribute to animate - The
begin
attribute defines when the animation should start - The
dur
attribute defines the duration of the animation - The
from
attribute defines the starting value - The
to
attribute defines the ending value - The
repeatCount
attribute defines how many times the animation should play
SVG <animate> with Freeze
In this example, we want the red circle to freeze (stop) when it comes to its final position (instead of snapping back to the start position):
Here is the SVG code:
Example
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" style="fill:red;">
<animate
attributeName="cx"
begin="0s"
dur="8s"
from="50"
to="90%"
fill="freeze" />
</circle>
</svg>
Try it Yourself »
Code explanation:
- The
fill="freeze"
attribute defines that the animation should freeze when it comes to its final position
SVG <animateTransform>
The <animateTransform>
element animates the transform
attribute on the target element.
The <animateTransform>
element should be nested inside the target element.
In this example, we create a red rectangle that will rotate:
Here is the SVG code:
Example
<svg width="200" height="180" xmlns="http://www.w3.org/2000/svg">
<rect
x="30" y="30" height="110" width="110" style="stroke:green;fill:red">
<animateTransform
attributeName="transform"
begin="0s"
dur="10s"
type="rotate"
from="0 85 85"
to="360 85 85"
repeatCount="indefinite" />
</rect>
</svg>
Try it Yourself »
Code explanation:
- The
attributeName
attribute animates thetransform
attribute of the<rect>
element - The
begin
attribute defines when the animation should start - The
dur
attribute defines the duration of the animation - The
type
attribute defines the type of transformation - The
from
attribute defines the starting value - The
to
attribute defines the ending value - The
repeatCount
attribute defines how many times the animation should play
SVG <animateMotion>
The <animateMotion>
element sets how an element moves along a motion path.
The <animateMotion>
element should be nested inside the target element.
In this example, we create a rectangle and a text. Both elements have an <animateMotion>
element with the same path:
Here is the SVG code:
Example
<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
<rect
x="45" y="18" width="155" height="45" style="stroke:green;fill:none;">
<animateMotion
path="M0,0 q60,100 100,0
q60,-20 100,0"
begin="0s"
dur="10s"
repeatCount="indefinite" />
</rect>
<text x="50" y="50"
style="font-family:Verdana;font-size:32">It's SVG!
<animateMotion
path="M0,0 q60,100 100,0 q60,-20 100,0"
begin="0s"
dur="10s"
repeatCount="indefinite" />
</text>
</svg>
Try it Yourself »
Code explanation:
- The
path
attribute defines the path of the animation - The
begin
attribute defines when the animation should start - The
dur
attribute defines the duration of the animation - The
repeatCount
attribute defines how many times the animation should play