SVG path animator guide

Help

Short answers to what goes wrong most often.

My pasted path does not draw

Paste only the value of d, such as M 10 10 L 100 100, not the whole <path> element and not the quotes. A whole element gives a line of length zero, and nothing draws.

If a command in the middle is wrong, the path draws only up to that point, and a note under the box says where. If none of it can be read, the note says so, and the CSS box skips that path.

A path that is only a filled shape still draws its outline. See path commands.

My path is cut off or tiny

The drawing is a 400 × 400 space, from 0 at the top left. A path drawn for a different size lands off the edge or in a corner. Scale its numbers to fit, or give your own page the viewBox the path was made for.

My pasted path is gone

Pressing a shape replaces the picked path with that shape, and Reset puts the heart back. Keep a copy of your own path before you try the shapes, or add a new path first.

How does Alternate play?

With Alternate, the line draws, then undraws back to its start. With Loop on it keeps going; with Loop off it does this once and ends empty.

The CSS carries the same direction and count, so your page plays it the same way.

Stagger does nothing

Stagger needs more than one path and a Delay above 0. Press Play, or drag the timeline, to see the paths start one by one.

The drawing is already complete when the page opens

Your device asks for less motion, so the page shows the drawing complete, and Play, Restart and the shapes show it complete too instead of moving it. Drag the timeline to see any point of the drawing. The CSS you copy does not check that setting; add your own rule if your page should respect it.

Copy did nothing

Some browsers do not let a page write to the clipboard, or ask first. If a message says copy failed, select the text in the CSS box and copy it by hand, or use Download SVG for the markup.

The download did not start

Some browsers ask before a page saves a file, or block it. Allow downloads for the page, or use Copy SVG instead.

Is my path uploaded?

No. The path is drawn on your device and never leaves it.

Are there keyboard shortcuts?

The tool has none of its own. Anywhere in the lab, Ctrl K, or Cmd K on a Mac, opens the list of all tools.