SVG path animator guide
Keep your work
Everything is made in your browser, and nothing is uploaded. The three buttons sit under CSS output.
| Button | What you get |
|---|---|
| Copy CSS | For each path, a set of keyframes named draw-path-1, draw-path-2 and so on, and a rule for the class path-1, path-2 and so on. The rule sets stroke-dasharray to the path's length, and plays the keyframes with your Duration, easing, Delay, direction and Loop, at the speed you picked. It uses both, so each line stays hidden while it waits and keeps its last frame at the end. |
| Copy SVG | The <svg> markup: a 400 × 400 viewBox, the same CSS in a <style>, and one <path> per path with its d, colour, width, fill and the class path-1, path-2 and so on. Pasted into a page, it draws itself. |
| Download SVG | The same markup as a file, animated-path.svg. Opened on its own in a browser, it draws itself too. |
To use them on your own page:
1. Paste the SVG into your HTML. Its viewBox keeps the 400 × 400 space, so it scales to any size you give it. The line draws when the page loads.
2. If you would rather keep the CSS in your stylesheet, press Copy CSS, paste it there, and remove the <style> from the SVG. The class names already match.
With Loop on, the CSS repeats for ever; with Loop off, it draws once, or draws and undraws once with Alternate.
The easing names in the CSS are the same curves the preview uses, so the timing matches what you saw.