SVG Path Length Calculator
Paste an SVG path d attribute to get its total length in pixels — perfect for stroke-dasharray draw-on animations — with a live preview.
About this tool
The classic SVG line-drawing animation works by setting a path’s stroke-dasharray and stroke-dashoffset to its total length, then animating the offset to zero so the stroke appears to draw itself. To do that you need the exact path length, which this tool computes by rendering your path in the browser and calling the native getTotalLength() method — the same value the animation relies on. Paste the d attribute (the long string of move/line/curve commands), see it previewed live, and read the length in user units (pixels). It also gives you a ready-made CSS snippet with the dasharray and dashoffset set to that length. Because it uses the browser’s own SVG geometry engine, the measurement matches exactly what your animation will use.
How to use it
- Paste your path’s d attribute into the box.
- Check the live preview of the path.
- Read the total length in pixels.
- Copy the stroke-dash CSS for a draw-on animation.
Frequently asked questions
- How is SVG path length measured?
- By the browser’s native SVGGeometryElement.getTotalLength() method, which computes the precise length of the path including all curves and arcs. This tool renders your path and reads that value, so it matches what CSS and JS animations will use.
- Why do I need the path length?
- For the line-drawing (“draw-on”) animation. You set stroke-dasharray and stroke-dashoffset equal to the length, which hides the stroke, then animate dashoffset to 0 to reveal it progressively, making the line appear to draw itself.
- What units is the length in?
- SVG user units, which correspond to pixels in the path’s coordinate system (the viewBox). If the SVG is scaled with CSS, the visual length scales too, but the dasharray uses these intrinsic user units.
- How do I make the draw-on animation?
- Set stroke-dasharray and stroke-dashoffset to the length, then transition or animate stroke-dashoffset to 0. The tool provides a copy-ready CSS snippet with the length filled in.
- My path will not parse — why?
- The d attribute must be valid SVG path syntax (commands like M, L, C, S, Q, A, Z with the right number of coordinates). A typo, missing number, or stray character makes it invalid. Copy the d value exactly from your SVG.
- Does transform or stroke-width affect the length?
- No. getTotalLength() measures the geometric centerline of the path in its own coordinate space, independent of stroke width or CSS transforms. Scaling the SVG changes the displayed size but not this intrinsic length value.