SVG path animator guide

Overview

SVG path animator makes a vector line look as if a pen is drawing it.

A green jagged mountain line and a violet wave line, each partly drawn, on a dark ground
Two paths, the Mountain and the Wave, paused at 70% of the timeline.

An SVG path is a line described by a short text, its d attribute. The tool measures how long each line is, its path length.

stroke-dasharray turns a line into dashes and gaps. Set the dash to the full length of the path, and the line is one long dash followed by one long gap.

stroke-dashoffset slides that dash along the path. At the full length the dash has slid out of sight and the line looks empty. At zero it covers the whole path. Move the offset from one to the other and the line seems to grow from its start. This is a line drawing animation.

The same two properties become CSS keyframes you can copy into your own page, with the timing, easing and stagger you set.

Open SVG path animator Start here

In this guide

  1. StartWhat you need, your first drawing, and the playback bar.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the settings that made them.
  4. Keep your workThe CSS, the SVG, and how to use them together.
  5. HelpWhat to do when something goes wrong.

It runs in your browser. Nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.