Segment

A JavaScript library to draw and animate SVG path strokes.

See the DEMO.

Read this article to understand how it works.

Basic usage

HTML

Add the segment script, and define a path somewhere.

<script src="https://cdnjs.cloudflare.com/ajax/libs/segment-js/1.1.3/segment.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);

Install with NPM

npm install segment-js

Constructor

The Segment constructor asks for 4 parameters:

• path: DOM element to draw.
• begin (optional, default 0): Length to start drawing the stroke.
• end (optional, default 100%): Length to finish drawing the stroke.
• circular (optional, default false): Allow begin and end values less than 0 and greater than 100%.

Method draw(begin, end, duration, options)

Note that begin and end can be negative values and can be written in any of these ways:

• floatValue
• percent
• percent + floatValue
• percent - floatValue

All possible options for draw method

Example

function cubicIn(t) {
    return t * t * t;
}

function done() {
    alert("Done!");
}

segment.draw("-25%", "75% - 10", 1, {delay: 0.5, easing: cubicIn, circular: true, callback: done});

Animating with another library

It's possible to animate the path stroke using another JavaScript library, like GSAP. Segments offers a method called strokeDasharray that is useful for this issue. Here is an example using TweenLite (with CSSPlugin).

TweenLite.to(path, 1, { strokeDasharray: segment.strokeDasharray(begin, end) });