I have been working on a tool that allows to animate the SVG path strokes in a configurable way. Because the only tool that I know to perform this kind of work is DrawSVGPlugin from GSAP, but unfortunately it is not free.

For this reason I have been figuring out how to animate the path stroke with the attributes stroke-dasharray and stroke-dashoffset, and the result is the tool that today I put in your hands:

Segment, a little JavaScript class (less than 2kb, without dependencies) to draw and animate SVG path strokes.

You can check the demo, or get the source code from GitHub. Additionally, you may be interested in understanding how it works, in that case, I’ll be happy to show you the theory behind.

Basic knowledge

First you need to understand the stroke-dasharray and stroke-dashoffset attributes. I also recommend you this excellent article by Jake Archibald.

So, how to draw a path stroke from a certain distance to another using these attributes?

Drawing from begin to end

The answer is to define the attributes in the following way:

stroke-dasharray = "totalLength, begin, end - begin"
stroke-dashoffset = "totalLength"

See the Pen Drawing SVG segments by lmgonzalves (@lmgonzalves) on CodePen.

Since stroke-dasharray specify the lengths of alternating dashes and gaps, the first value (totalLength) means that the length of the first dash will be equal to the total length of the path. However, as we have defined the same length for stroke-dashoffset, this dash will not be visible because it is “pulling” to the beginning of the path.

The next value (begin) is the length of the first gap, which ends where you actually want to start drawing. Finally we have defined a third value (end - begin), which corresponds to the length of the next dash, being drawn in this way only the part between begin and end.

Having defined three values (odd) for stroke-dasharray, it is equivalent to repeat those values to yield an even number of them. Then the next gap will have a length equal to the total length of the path (first defined value).

This is a basic formula for drawing the segment you want of a path.

Why to use Segment?

The advantages of using Segment is that you can animate the transition from one segment to another, define a begin and end values with expressions like "50% + 10", set delays, easing functions, callbacks, and all these with less than 2kb!

That’s all (for now). I hope it has been useful, your comments are welcome. And don’t forget to share with your friends :)