segment

A JavaScript library to draw and animate SVG path strokes

Subscribe to updates I use segment


Statistics on segment

Number of watchers on Github 1544
Number of open issues 2
Average time to close an issue 12 days
Main language CSS
Average time to merge a PR about 15 hours
Open pull requests 0+
Closed pull requests 0+
Last commit 6 months ago
Repo Created over 2 years ago
Repo Last Updated 4 months ago
Size 84 KB
Homepage http://lmgonzalve...
Organization / Authorlmgonzalves
Latest Releasev1.0.0
Contributors1
Page Updated
Do you use segment? Leave a review!
View open issues (2)
View segment activity
View on github
Latest Open Source Launches
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating segment for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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)

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) });
segment open issues Ask a question     (View All Issues)
  • over 2 years Lacks a Typescript Definition
  • over 2 years Dashed path possible?
segment questions on Stackoverflow (View All Questions)
  • How should I calculate the average speed by road segment for multiple segments?
  • Why won't iOS segmented control's color restore after select another segment
  • Coloring every segment of polyline with different color in javafx
  • codeigniter how to set route with no segment and also no of segment
  • Dynamic path segment OR 404
  • How do I clip a line segment against a frustum?
  • segment class in java
  • Mailchimp api v3.0: Adding subscriber to segment
  • How to change Segment Control Tab by click on button?
  • redirect and change a single URL segment
  • Mysql point to segment distance query
  • How to only "take" a segment of a String -- from Index 0 to the white space?
  • Java: measure network bandwidth for a specific code segment
  • How to divide the web page in different segment.?
  • Assembly Language Absolute addresses and segment registers
  • draw segment from angle despite changing aspect ratio
  • Drawing a custom circle segment dynamically
  • Best Way to Segment Lung Nodules in Matlab
  • why system loader load strings at read/execute segment?
  • Huge difference in Advanced segment and Custom Report
  • Assembly: Using the Data Segment Register (DS)
  • Urban Airship: Remove tags from an entire segment
  • GAPI: Filter or segment 1 hit per unique URL
  • Height issue with segment inside to grid column
  • WordPress convert query string to segment
  • vmmap for OS-X, how does segment name is acquired
  • How to add segment control on mapview using objective C?
  • How to find if HL7 Segment has ended or not if Carriage return is not present
  • Conditionally hiding a segment of json in javascript code
  • binary tree segment fault in C++
segment list of languages used
Other projects in CSS