SVG Path Animation with Pure JavaScript – Segment.js

Preview:

Description:

Segment.js is a lightweight JavaScript library used to draw and animate the stroke on every <path> inside the selected <svg> element.

Basic usage:

Download and insert the Segment.js into your document.

<script src="dist/segment.min.js"></script>

Initialize a new instance on the element you want to animate.

var myPath = document.getElementById("my-path"),
    segment = new Segment(myPath);
segment.draw("25%", "75% - 10", 1);

Parameters:

• begin:0 – Path length to start drawing.
• end: 100% – Path length to finish drawing.
• duration: 0 – Duration (in seconds) of the animation.
• options: null – Options for animation in object notation.

draw(begin, end, duration, options)

All options:

• delay: 0 – Waiting time (in seconds) to start drawing.
• easing: linear – Easing function (normalized).
• circular: false – If true, when the stroke reaches the end of the path it will resume at the beginning. The same applies in the opposite direction.
• callback: null – Function to call when the animation is done.

Changelog:

v1.1.3 (08/03/2018)

• More options and functions.