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-dashoffset, and the result is the tool that today I put in your hands:
So, how to draw a
path stroke from a certain distance to another using these attributes?
The answer is to define the attributes in the following way:
stroke-dasharray = "totalLength, begin, end - begin" stroke-dashoffset = "totalLength"
stroke-dasharray specify the
lengths of alternating dashes and gaps, the first value (
length of the first dash will be equal to the total
length of the
path. However, as we have defined the
stroke-dashoffset, this dash will not be visible because it is “pulling” to the beginning of the
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
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
Why to use Segment?
The advantages of using Segment is that you can animate the transition from one
segment to another, define a
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 :)