How To Draw A Line In Svg

When cartoon lines with SVG, you often have a <path> element with a stroke. Yous set a stroke-dasharray that is as long as the path itself, as well equally a stroke-outset that extends and then far that the unabridged stroked path appears hidden initially. Then y'all animate the stroke-offset back to 0 so yous can scout information technology "draw" the shape.

Figuring out the length of the path is the trick, which fortunately you tin 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.

Hither'southward the pull a fast one on!

You don't have to measure the length of the path, because yous tin can prepare it.

And then you practice like:

          <path d="M66.039,133.545 ... " pathLength="1" />

That doesn't exercise annihilation by itself (equally far every bit I know). It'south not like that merely draws part of the path — it still draws the whole thing like as if you did zip, only at present the "math" of the path length is based on a value of 1.

Now we can set the stroke-dasharray to ane, and animate the first in CSS!

          .path {   stroke-dasharray: i;   stroke-dashoffset: ane;   animation: dash 5s linear alternating infinite; }  @keyframes nuance {   from {     stroke-dashoffset: 1;   }   to {     stroke-dashoffset: 0;   } }

Which works:

See the Pen
Bones Instance of SVG Line Drawing, Backward and Forrad 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 folio for their 2019 charity that uses scroll-triggered SVG line drawing up and downwardly the entire page. They did a backside-the-scenes look at it, which I e'er appreciate.