Today I’m very happy to release a new featured coded inside Segment. From now, you’ll could animate the paths in a “circular” way. This means that, for example, if you set an end value greater than the path length, when the stroke reaches the end of the path it will resume at the beginning. The same applies in the opposite direction.

This also means that you can use negative values to define begin and end values (can be percentages), besides higher values. To work in this way you need to set the new option circular to true. For example:

segment.draw("-175%", "-125%", 1, {circular: true});

Here you have a little demo to show the potential of this new feature:

See the Pen Circular drawing using segment by lmgonzalves (@lmgonzalves) on CodePen.

I really hope you like it and find it useful. Happy coding ;)