Animate stroke paths and create self-drawing or self-erasing effects in just a few clicks
The best thing in SVGator is that there is no steep learning curve, downloadable software or plug-ins. You can create a Path based animation online within minutes, without any coding skills.
User-friendly interface for CSS properties
Use the Dashes and Offset inputs to create dashes on the stroke and move them along the path.
How the path animator works
Self-drawing line
Set an offset animation between the value of the path's length and 0. Using the negative value of the length will change the line's direction.
Self-drawing & erase
Set an offset animation using the negative and the positive value of the path's length.
Animate dashes
Set different dasharray values using the Dashes inputs, then move them along the path using the offset.