Segment is a little JavaScript class – 2kb (without dependencies) to draw and animate SVG path strokes.

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!

The easing functions used in this demo belong to the excellent library d3-ease.

animate-SVG-path-strokes

[gpp_button color=”blue” url=”http://lmgonzalves.github.io/segment/” title=”animate SVG path strokes” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Segment[/gpp_button]

[gpp_button color=”black” url=”https://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]