What this is
SVG path animator draws a vector path the way a pen would. It measures the length of each path, sets stroke-dasharray to that length, then moves stroke-dashoffset from the full length down to zero, so the line seems to grow from its start. The same two properties become CSS keyframes you can paste into your own page.
How to use it
- Pick a shape, or paste the d attribute of your own path.
- Set the duration, delay and easing, then press Play or drag the timeline.
- Add more paths and turn on stagger, then copy the CSS or the SVG.
Read the guide
Words: stroke-dasharray · keyframe · easing
Common questions
How does Alternate play?
With Alternate, the line draws, then undraws back to its start. With Loop on it keeps going; with Loop off it does this once and ends empty. The CSS carries the same direction and count, so your page plays it the same way.
Is my path uploaded?
No. The path is drawn on your device and never leaves it.