When drawing lines with SVG, you often have a <path>
element with a stroke
. You set a stroke-dasharray
that is as long as the path itself, as well as a stroke-offset
that extends so far that the entire stroked path appears hidden initially. Then you animate the stroke-offset
back to 0
so you can watch it “draw” the shape.
Figuring out the length of the path is the trick, which fortunately you can do in JavaScript by selecting the path and doing pathEl.getTotalLength()
. It’ll probably be some weird decimal. A smidge unfortunate we can’t get that in CSS, but c’est la vie.
Here’s the trick!
You don’t have to measure the length of the path, because you can set it.
So you do like:
<path d="M66.039,133.545 ... " pathLength="1" />
That doesn’t do anything by itself (as far as I know). It’s not like that only draws part of the path — it still draws the whole thing like as if you did nothing, only now the “math” of the path length is based on a value of 1.
Now we can set the stroke-dasharray
to 1
, and animate the offset in CSS!
.path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
Which works:
See the Pen
Basic Example of SVG Line Drawing, Backward and Forward by Chris Coyier (@chriscoyier)
on CodePen.
High five to Adam Haskell who emailed me about this a few months back.
Hey, speaking of SVG line drawing: Lemonade made a landing page for their 2019 charity that uses scroll-triggered SVG line drawing up and down the entire page. They did a behind-the-scenes look at it, which I always appreciate.

This is very convenient. Unfortunately, it looks like pathLength attribute is not yet supported in Safari.
https://bugs.webkit.org/show_bug.cgi?id=72401
Support has been added upstream and can be tested out with Safari Technology Preview (I was not able to see it working in v99 personally but it seems to be clearly working now as of v100).
It may be a while before this can be broadly relied upon in the Safari ecosystem but I’m glad to see it added.
I am trying to learn web designing so not well versed in these things. Is it not a good method to measure the path length before hand with tools like Path Length Calculator?
The point is you don’t need to measure it if you’ve set the length yourself.
What this article is trying to say is that with this method of pathLength=”1″, you don’t have to. The actual length is made irrelevant as it becomes abstracted by the parameter.
“Deprecated since SVG 2”
https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/pathLength
The support chart on that page is wrong though – so I wonder if that’s up-to-date information or not. Would be interesting to see the spec where it is nixxed.
I’m trying to use this to draw a triangle but unfortunately, the line starts and finishes at one of the corners leaving line caps at one of the corners rather than a single, sharp corner.
Is there any way I could change the code to add the sharp corner back?