Vivus SVG Line Draw — Self-Drawing SVG Animation

A logo that draws itself is one of the few web animations that still stops people mid-scroll. It also looks like it must involve a video or a Lottie file, and it involves neither — it is one CSS property, applied cleverly.

The trick underneath

Every SVG stroke supports stroke-dasharray, which turns a solid line into a dashed one, and stroke-dashoffset, which slides those dashes along the path. Set the dash length to exactly the total length of the path and you get a single dash covering the whole line, with a single gap of the same size after it. Push the offset to that same length and the dash is pushed entirely out of view — the path is invisible. Animate the offset back to zero and the line appears to be drawn from one end to the other.

Doing it by hand means calling path.getTotalLength() on every element, writing two properties per path, and hand-scheduling the timing. Vivus is a 5kb library that does exactly that, for every drawable element in an SVG, automatically.

What the three types actually change

The type option is the whole personality of the animation, and the three modes here are meaningfully different:

- `delayed` — every path animates over the full duration, but each starts at a slightly staggered offset. Strokes overlap heavily, so the drawing appears to emerge everywhere at once while still resolving in order. This is the most "designed" looking option and the default here. - `oneByOne` — each path waits for the previous to finish completely. The duration is divided by total path length, so long paths take proportionally longer. This is the literal "someone is drawing this" reading, and it is much slower to complete. - `sync` — every path starts and ends together. The whole illustration materializes as one, which suits geometric marks and looks wrong on illustrative ones.

Because oneByOne and delayed derive their schedule from measured path lengths, document order matters — the SVG here is authored deliberately, with the outer rings first and the foreground detail last, so the drawing builds from frame to subject.

Manual start, and driving it yourself

start: 'manual' is what makes this snippet interactive rather than a fire-and-forget intro. Nothing plays until .play() is called, which means you can trigger on scroll with an IntersectionObserver, on hover, or on a button as done here.

The scrubber is the more interesting half. vivus.setFrameProgress(0.5) jumps the drawing to any point between 0 and 1 instantly — so the animation becomes a timeline you can drag, not just something you watch. Wiring that to a scroll position instead of a range input is the scroll-driven logo-draw effect seen on agency sites, and it is one line different from what is here.

Keeping the slider in sync *during* playback needs a small loop, because Vivus does not emit progress events. It exposes currentFrame and frameLength, so a requestAnimationFrame poll converts them to a percentage while playing is true and stops the moment the completion callback fires.

The gotcha: destroy before rebuilding

Switching the timing type requires a new Vivus instance, and this line is not optional:

if (vivus) vivus.destroy();

Vivus mutates the SVG it is given, writing stroke-dasharray and stroke-dashoffset inline on every path. Constructing a second instance over the same markup makes it measure paths that already carry the previous run's dash values, and the result is an animation that starts half-drawn or never completes. destroy() restores the original attributes so the new instance measures clean geometry. This is the single most common Vivus bug and it only appears once you make the animation reconfigurable.

Authoring SVG that Vivus can draw

The requirement is simple and absolute: Vivus animates strokes, not fills. Every element here is fill: none with an explicit stroke and stroke-width, set in CSS rather than as attributes so the artwork stays themeable. Shapes that are filled rather than stroked are skipped entirely — which is why exporting a logo from a design tool usually produces nothing until the fills are converted to outlined strokes.

stroke-linecap: round and stroke-linejoin: round matter more than they look: a drawing animation constantly reveals path *ends*, and square caps make every in-progress stroke read as cut off.

Reusing it

Drop in your own line-art SVG, keep everything fill: none with strokes, and order the paths the way you want them drawn. Trigger play() from an IntersectionObserver for a scroll-triggered logo intro, or feed scroll progress into setFrameProgress() for a scrubbed one. It pairs naturally with a draw SVG success checkmark for micro-feedback, or morph SVG icons when shapes need to become other shapes rather than appear.