SVG path animator guide

Start

The tool opens with a green heart that draws itself once, then again, in a loop.

What you need

• A current browser. Chrome, Edge, Firefox and Safari all draw SVG.
• A path of your own, if you want one: the d attribute of an SVG path, in a 400 × 400 space.

Your first result

1. Open SVG path animator. The heart is already drawing.
2. Under Shape, press a shape such as Star, or paste the d of your own path into the box under the shapes.
3. Under Animation, move Duration and Delay, and pick an easing.
4. Press Play under the drawing, or drag the timeline to any point of the drawing.
5. Under CSS output, press Copy CSS.

Good to know

• The bar under the drawing holds the playback: Play (named Pause while it plays), Restart, the timeline, the time, Loop, and four speeds from 0.25x to 2x. See playback speed.
• Dragging the timeline pauses the drawing and shows that point of it, with the Delay, stagger and direction you set. This is a scrub. Press Play to go on from there.
• Picking a shape, or pressing Restart, plays the drawing from its first frame.
• With Loop on, each path draws again when it ends, the way the copied CSS repeats. With Loop off, the drawing stops on the last frame.
• Speed changes the preview, and the CSS too: at 2x the copied Duration and Delay are half of what you set.
• On a phone the controls sit in a bar at the bottom of the screen. Tap the bar to open them.