SVG path animator guide
Every control
Every control in the panel, top to bottom. The playback bar under the drawing is described on Start.
Load and save
- Download SVGButton
- Saves the same SVG, CSS inside, as animated-path.svg.
- Copy SVGButton
- Copies the SVG markup of the drawing, with the CSS inside it, so a paste animates on its own.
- Copy CSSButton
- Copies the CSS in the box above. See clipboard.
Paths
Up to five paths can draw at once. Each one has its own shape; the timing, easing, direction and stroke width are shared.
- The path listFilled in by the tool
- One row per path, with its colour. Press a row to pick that path; the shape and the box below then change that one. Each row has Remove once there is more than one path.
- Add pathButton
- Adds a path, drawn as a star, in the next colour, and picks it. Five paths is the most.
Shape
The shape you press, or the text you paste into the box under the shapes, goes to the path picked under Paths. The box shows that path's d attribute, and whatever you type there draws at once. If part of a path cannot be read, a note under the box says which path and from where. See path commands.
- Star · Heart · Arrow · Wave · Spiral · Logo · Mountain · LightningPick one
- Puts a ready-made path in the picked path and plays the drawing from the start. See preset.
- Star: A five-pointed star of straight lines, closed at the end.
- Heart: A heart made of curves. The page opens with it. See Bézier curve.
- Arrow: A thick arrow pointing right, drawn as its outline.
- Wave: An open line of curves that swings up and down.
- Spiral: A curve that winds outward from the middle.
- Logo: A capital A in two strokes. The crossbar is a second stroke in the same path, drawn after the A.
- Mountain: A jagged open line of peaks.
- Lightning: A zigzag bolt, drawn from the top.
Animation
- DurationSlider · 5 to 50 · starts at 20
- How long one drawing takes, from 0.5 to 5 seconds, at 1x. See duration.
- DelaySlider · 0 to 30 · starts at 0
- How long to wait before a path starts, up to 3 seconds. With Stagger paths on, it is the wait between one path and the next. See delay.
- Linear · Ease in and out · Ease in · Ease outPick one
- How the drawing speeds up and slows down along the way. See easing.
- Normal · Reverse · AlternatePick one
- Which way the drawing plays, in the preview and in the CSS. See animation direction.
- Normal: The line grows from its start to its end.
- Reverse: The line starts drawn and shrinks back to its start.
- Alternate: Draws the line, then undraws it back to its start. With Loop off it does this once and ends empty.
Stroke
- Stroke widthSlider · 1 to 8 · starts at 3
- How thick every line is, from 1 to 8. See stroke width.
- Stroke colorColour · starts #10B981
- The colour of the first path. The other paths keep the colour they were given when added. See stroke colour.
- Fill at 50% opacityOn or off · starts off
- Fills each path with its own colour at half strength. The fill shows at once; only the line draws. See fill.
- Stagger pathsOn or off · starts off
- Starts each path one Delay after the one before, so they draw one by one. With Delay at 0 they still start together. See stagger.
CSS output
The box above the buttons shows the CSS the tool writes, and it changes as you change the settings. Read it, or select it and copy it by hand.
Reset
It does not reload the page.
- ResetButton
- Puts every setting, the paths and the playback back to how the page opened: one green heart, 2 seconds, ease in and out, Loop on, 1x. The heart then draws again.