Segment

A JavaScript library to draw and animate SVG path strokes
Available on GitHub under MIT licence
segment.draw(
Segment begin
,
Segment end
,
Duration
, {easing:
Easing function
} );

Basic usage

HTML

Add the segment script (less than 2kb), and define a path somewhere.

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

<svg>
    <path id="my-path" ...>
</svg>

JavaScript

Initialize a new Segment with the path. Then draw a segment of stroke every time you want with: .draw(begin, end, duration, options).

var myPath = document.getElementById("my-path"),
    segment = new Segment(myPath);

segment.draw("25%", "75% - 10", 1);
More documentation

Credits

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