tool / svg pathruns in your browser
SVG path viewer
Paste an SVG, or just a path’s d value. See every shape’s length and commands, find out what would stop it drawing, watch it draw, and copy the animation as CSS, JavaScript or React.
- Shapes read
- 7
- Path commands
- 10
- Output
- 4
- Uploads
- 0
Paste an SVG
How a line draws itself
The stroke is turned into one dash exactly as long as the path, then pushed back by that whole length, so nothing shows. Animating stroke-dashoffset to 0 slides the dash into place and the line appears to draw (fig. 1). It needs a stroke to animate, and the length to be right.
path {
stroke-dasharray: 412; /* the length: one dash as long as the path */
stroke-dashoffset: 412; /* pushed back by its whole length: hidden */
animation: draw 2s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; } /* slide it into place: the line draws */
}Getting a path’s length
The browser measures any shape for you. The number is in the SVG’s own units, the ones its viewBox uses, which is also what stroke-dasharray counts in, so the two always agree.
const path = document.querySelector('path');
// The length in the SVG's own units (its viewBox), before any transform.
const length = path.getTotalLength();
// The point at any distance along it, e.g. half way:
const { x, y } = path.getPointAtLength(length / 2);SVG path commands
A path’s d is a list of these. A capital letter means absolute coordinates; the lowercase letter (m, l, c…) means relative to where the pen already is.
| Command | Name | Takes | What it draws |
|---|---|---|---|
| M / m | Move to | x y | Lifts the pen and puts it down at x, y. Every path starts with one; a new M starts a new piece. |
| L / l | Line to | x y | A straight line to x, y. |
| H / h | Horizontal line | x | A straight line across to x, keeping y. |
| V / v | Vertical line | y | A straight line up or down to y, keeping x. |
| C / c | Cubic curve | x1 y1 x2 y2 x y | A curve to x, y, pulled toward two control points. |
| S / s | Smooth cubic | x2 y2 x y | A cubic curve whose first control point mirrors the last one, so the join is smooth. |
| Q / q | Quadratic curve | x1 y1 x y | A curve to x, y with one control point. |
| T / t | Smooth quadratic | x y | A quadratic curve whose control point mirrors the last one. |
| A / a | Arc | rx ry rotation large-arc sweep x y | Part of an ellipse to x, y: radii, a rotation in degrees, and two 0/1 flags that pick which of the four possible arcs. |
| Z / z | Close path | — | A straight line back to where the piece started, joined cleanly. |
SVG path questions
What is an SVG path?
A <path> element draws a shape from a list of commands in its d attribute: M moves the pen, L draws a line, C and Q draw curves, A draws an arc and Z closes the shape. Each command is a letter followed by numbers; a capital letter uses absolute coordinates and a lowercase one is relative to where the pen is.
How do I get the length of an SVG path?
Call getTotalLength() on the element in JavaScript: document.querySelector('path').getTotalLength(). It works on path, line, polyline, polygon, rect, circle and ellipse, and returns the length in the SVG’s own units. The viewer above shows it for every shape you paste.
How do I animate an SVG path so it draws itself?
Set stroke-dasharray and stroke-dashoffset to the path’s length, then animate the offset to 0, so a single dash as long as the line slides into place. Adding pathLength="1" lets you write 1 instead of measuring. To tie the drawing to scroll instead of time, scrollDraw from svg-scroll-draw does the measuring and the scroll maths.
Why is my SVG line animation not working?
The usual reasons: the shape has no stroke (the drawing animates the stroke, so a fill-only icon shows nothing), a fill covers the line before it draws, the dash length is shorter than the path, or the stroke is set in a stylesheet the animation does not reach. The viewer checks each of these.
Can I edit an SVG path here?
No, this is a viewer and checker: it reads, measures, previews and writes the animation code. To change a shape, edit it in a drawing tool such as Figma, Illustrator or Inkscape, export the SVG, and paste it back here to check it.
Is it safe to paste my SVG here?
Yes. Nothing is uploaded: the SVG is read in your browser, and only drawing elements and drawing attributes are rebuilt from it, so a script, an event handler, an external image or a link inside it is left out instead of run.
Drawing on scroll with svg-scroll-draw 2.23.3: the docs, or the text animation generator for words instead of lines.