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.2/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)

| Name | Type | Default | Description | |------------|----------|---------|-------------| |begin | string | 0 | Path length to start drawing. | |end | string | 100% | Path length to finish drawing. | |duration | float | 0 | Duration (in seconds) of the animation. | |options | object | null | Options for animation in object notation. |

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

| Name | Type | Default | Description | |------------|----------|---------|-------------| |delay | float | 0 | Waiting time (in seconds) to start drawing. | |easing | function | linear | Easing function (normalized). I highly recommend d3-ease. | |circular | boolean | 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 | function | null | Function to call when the animation is done. |

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) });