How to create beautiful SVG animations with strokes, fills, and more

For detailed explanations about SVG and how to create them, please see the following articles.
TIPS Vol.34 How to Create SVG
TIPS vol.64 Points to Watch Out for When Creating SVG Data

SVG is a vector-format image.
Unlike JPG or PNG formats, it's composed of path data, and since the path information is stored in XML format, it can be edited directly in code.

This means you can add animations using XML-format animation tags, or add class names to individual paths and fine-tune animations on SVG images using CSS3.

This is an SVG animation that combines a stroke motion (like drawing with a pen) with a change in fill.

Sample code

#boel{stroke:#000; stroke-width:1px; fill:transparent; stroke-dasharray:1425px; stroke-dashoffset:1425px; animation:anim 2s ease-in 0s forwards;}
@keyframes anim{
0%{stroke-dashoffset:1425px;}
30%{fill:transparent;}
60%{stroke-dashoffset:0;}
100%{stroke-dashoffset:0; fill:#000000;}
}

Sample code explanation

stroke
Specifies the color of the path's line or the outline of a shape.

fill
Specifies the fill color of the shape.

stroke-width
Specifies the thickness of the line. Units like px, em, and rem can be used.

stroke-dasharray
Specifies the length of the dashes and the gaps between them.

stroke-dashoffset
Specifies the starting position of the line.

animation
A CSS animation property

stroke-dasharray
Turns the shape's line into a dashed pattern, specifying the length of each dash and the gap between them.

stroke-dashoffset
Specifies the starting position of the line.
When you enter a value, the line shifts from its original position by the specified amount, and the portion that falls outside the original path's position becomes invisible.

By setting stroke-dasharray to a length that covers the entire outline of the shape with no gaps, and then entering the same value for stroke-dashoffset, the line shifts by the entire length of the outline—making the shape appear invisible.

Sample code

<svg  style="stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;">
<!-- Path information and other elements go here -->
<!-- Animation settings below -->
<animate attributeType="css" attributeName="stroke-dashoffset" dur="4s" values="1425px;0px;0px;0px" repeatCount="indefinite" keyTimes="0;0.3;0.6;1" />
<animate attributeType="css" attributeName="fill" dur="4s" values="transparent;transparent;#000000;#000000" repeatCount="indefinite" keyTimes="0;0.15;0.5;1" />
</svg>

Sample code explanation

<svg>
The element that stores the SVG.
style="stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;" — CSS attributes for drawing the outline.
Even when animating with XML, the base line information is required, so this must be included.

<animate>
The element used to add motion to SVG.

attributeType
Specifies the type of attribute being animated. You can choose XML, CSS, or auto.
With "auto," the priority is CSS → XML.
In the sample above, since the attributes being changed are CSS properties, "css" is specified.

attributeName
Specifies the attribute to animate. You can specify coordinates like x and y, or properties like width and height.
In the sample above, stroke-dashoffset (which controls line position) and fill (which controls the shape's fill) are set as animation targets.

dur
Specifies the duration of one animation cycle.

values
Specifies the attribute values for the animation. Multiple values can be separated by semicolons.

keyTimes
Specifies the timing for animation to start. Values are given from 0 (start) to 1 (end).
The time segments specified in keyTimes correspond to values, so the number of attribute values in values and the number of time segments in keyTimes must be the same.

repeatCount — Specifies how many times the animation should repeat.
You can specify a number (the number of repetitions) or "indefinite" (loop continuously).

An animation that changes a shape's path information to transform it.
Since path information cannot be changed via CSS, we'll only introduce the XML method here.

Sample code

<svg>
<path>
<animate attributeType="XML" attributeName="d" dur="5s" repeatCount="indefinite"
values="M88,140.9c34.7-6.6,56-41.7,52.7-65.7s-56.7-79-94-48.7s-49.3,69.7-17.7,96.3S63.4,145.6,88,140.9z;
(... path values continue as in original ...)" />
</path>
</svg>

Sample code explanation

<path>
The element that stores the shape's path data.

attributeName
Specifies the attribute to animate.
In the sample, "d" (path information) is set as the animation target.

When creating shapes in Illustrator or similar tools, if you change the number of paths between the original shape and the transformed shape, you won't be able to achieve smooth motion.

These are animations that rotate, scale, or move elements.

Sample code

#tonton circle{fill:#000000; transform:translate(0,0); animation:animT 2s linear 0s infinite;}
@keyframes animT{
0%{transform:translate(0,0);}
12.5%{transform:translate(80px,130px);}
25%{transform:translate(160px,20px);}
37.5%{transform:translate(240px,130px);}
50%{transform:translate(300px,20px);}
62.5%{transform:translate(240px,130px);}
75%{transform:translate(160px,20px);}
87.5%{transform:translate(80px,130px);}
100%{transform:translate(0,0);}
}

Sample code

<svg  style="stroke-width:0.1rem; stroke:#000000; stroke-dasharray:1425px;">
<!-- Path information and other elements go here -->
<!-- Animation settings below -->
<animate attributeType="css" attributeName="stroke-dashoffset" dur="4s" values="1425px;0px;0px;0px" repeatCount="indefinite" keyTimes="0;0.3;0.6;1" />
<animate attributeType="css" attributeName="fill" dur="4s" values="transparent;transparent;#000000;#000000" repeatCount="indefinite" keyTimes="0;0.15;0.5;1" />
</svg>

Sample code explanation

circle
The element for a circular path.

animateTransform
An element used to apply CSS3 transform attributes, which can't be handled by the animate element.
Basic usage is the same as animate.

The animate tag needs to be written inside the element you want to animate.
If you want to animate the entire SVG image, you write it between <svg> and </svg>, but in the sample above, since we only want to animate the circle element inside the SVG, we placed the animate tag between <circle> and </circle>.

Sample code

<svg id="tonton3" width="300px" height="150px" viewBox="0 0 300 150" style="enable-background:new 0 0 300 150;" xml:space="preserve">
<path id="stroke" fill="none" stroke="#dddddd" stroke-width="0.1rem" d="M0,0c0,0,10.2,108,62.7,129.7s111.5-48.1,153.7-84.1c39.9-34,60-21.7,60-2.2c0,28.8-31.1,58.9-97.6,46.7
C113.5,78.1,0,0,0,0z"/>
<circle cx="0" cy="0" r="20">
<animateMotion dur="3s" calcMode="linear" repeatCount="indefinite">
<mpath xlink:href="#stroke" />
</animateMotion>
</circle>
</svg>

Sample code explanation

<path id="stroke"…>
The path line element that serves as the motion trajectory.
Since mpath references it by id, setting an id is required.

animateMotion
An element used to handle animation along path data.

mpath
A child element of animateMotion.
The xlink:href attribute references the id of the line element that serves as the trajectory.

How was that?
This time, we introduced the basic elements of SVG animation and how to animate them using CSS and XML.
For small motions or simple animations on icons and text, we hope you've found that the coding isn't too difficult.

For more complex path graphics, animating with just CSS or XML can be challenging—but there are also many JavaScript plugins that make it easy to add animations to SVGs, so combining these effectively can help you make the most of SVG.