SVG path animator guide

Three looks

Each picture below was made in SVG path animator. The table under each one is the whole recipe; everything not listed stays as the page opens.

A timeline row is where the scrub bar was left, from 0 at the start to 1000 at the end. Setting it pauses the drawing there.

A star, half drawn

With linear easing, the middle of the timeline is the middle of the line: half the star is drawn, from its top point round the right side.

The dash covers half the path and the gap covers the rest, which is what stroke-dashoffset at half the length looks like.

Pick Ease in and scrub to the same place: less of the star is drawn, because the drawing starts slow.

Three paths, one after another

Each path waits one Delay longer than the one before, so the green Mountain is furthest along, the violet Wave is behind it, and the red Lightning has drawn only its first strokes.

The timeline counts the Delay and the stagger, so scrubbing shows each path at its own point.

Drag the timeline on from here and the Wave, then the Lightning, catch up one after another.

A filled heart

The fill is there from the first frame; only the line draws. The drawn part of the line sits over the soft pink inside.

The fill colour is the line colour at half strength, written as an eight-digit hex colour in the SVG.