svg animation

Create a new SVG animation now!

New project

Create a path animation

Path animation is used to create self-drawing and self-erasing effects. Before you start working on this animation, you must make sure that the element is a path. In case you’ve imported a different type of element (rectangle, polygon, circle or line), you can convert it to path. Simply right-click on the element and choose ‘Convert to path’. You can also use the shift + cmd/ctrl + P shortcut.

In this example, the star is a polygon and we will convert it to path:

svg animation

After you’ve converted it to path, you must make sure that it has a visible stroke. You can set the stroke color and width in the right sidebar.

Finally, set the Fill color to None. Now it’s a perfect path that you can use to create a self-drawing effect:

svg animation

Select the element on the canvas and go to the animators list. Add the Stroke offset and Stroke dashes animators to the timeline:

svg animation

Go to the Stroke panel on the right side of the app. Next to the Path length, click on the Set as offset button. The offset property defines the location along a path where your array of dashes will begin. Copy the same value from the Offset input and paste it to the Dashes input. Your settings should look like this, making the element invisible:

svg animation

Now, move the playhead on the timeline to the next second and set the Offset to zero:

svg animation

Play the animation from the beginning to see the self-drawing effect. You may notice that the ending of the path isn’t quite perfect. You can correct this in the Stroke panel by setting the Line ends and join to Round.

svg animation

You can also make a self-erasing animation by adding a new keyframe and setting the Path length again as offset.


More articles:

Create a morph animation

Modify an element’s stroke


Related features:

Animate the SVG element along a custom Path

Create self-drawing or self-erasing effects


Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.