segment-js for SVG Stroke Animation

The SVG stroke problem segment-js addresses

segment-js solves a focused frontend graphics problem: drawing only part of an SVG path stroke and animating that portion over a selected duration. It is intended for developers and designers who already have an SVG `path` element and want a line-drawing effect without implementing the stroke range calculations themselves. The library is also relevant when separate portions of one path need to appear at different times.

The project does not attempt to be a general SVG animation system. Its documented interface centers on `draw` and `strokeDasharray`. It does not claim to animate path coordinates, morph one shape into another, fill SVG geometry, or manage an animation timeline. That boundary makes the package easier to understand than a broad graphics framework, but it also means it will not replace GSAP for unrelated interface motion.

Segment works with a path as a browser DOM element. The `Segment` constructor accepts the path, an optional `begin`, an optional `end`, and an optional `circular` flag. The default range starts at `0` and finishes at `100%`. The `circular` constructor option allows range values below `0` or above `100%`, extending the usable coordinate range beyond the conventional path boundaries.

The package metadata identifies `dist/segment.js` as its main entry. This matters when selecting the script from an installed copy of `segment-js`, while the README separately provides a browser CDN example. The project describes itself as JavaScript even though SCSS is the repository's primary language and the top-level entries include `scss` and `css` directories. Its actual functional surface is the JavaScript path animation library, not a stylesheet framework.

How draw turns a path range into motion

The main operation is `draw(begin, end, duration, options)`. Its first two arguments define where drawing starts and stops along the selected path. The README accepts a float, a percentage, or a percentage combined with a float through addition or subtraction. Examples include `"25%"` and `"75% - 10"`. Negative positions are supported, allowing a range to extend to one side of the normal path boundary.

Duration is a floating-point value measured in seconds. Its default is `0`, so an omitted duration does not imply the same visual behavior as a long animation. The method returns control to the caller's surrounding code after scheduling the animation, while `options.callback` provides an explicit notification when the operation is done.

Four documented options control the animation. `delay` postpones the start in seconds and defaults to `0`. `easing` accepts a normalized function and defaults to linear progress. `circular` defaults to `false`; when set to `true`, the stroke resumes at the beginning after reaching the end, with corresponding behavior in the opposite direction. `callback` defaults to `null` and is called after completion.

This model is concise, but the documentation leaves some browser scheduling details unstated. It does not publish a requestAnimationFrame implementation note, cancellation method, or behavior for repeated calls against one `Segment` instance. If those cases matter, the calling code should not assume a cancellation or restart API that the README does not document.

Installing segment-js and creating the first stroke

For a browser page that already contains an SVG path, the README shows a direct CDN script and an HTML element with the ID `my-path`. The path content is omitted because its geometry depends on the page. Load the library before constructing `Segment` with that DOM element.

<script src="https://cdnjs.cloudflare.com/ajax/libs/segment-js/1.1.3/segment.js"></script>

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

After the script and path are present, construct `Segment` and call `draw`. In the README example, drawing from `"25%"` to `"75% - 10"` over `1` second selects a section toward the end of the path rather than revealing the entire stroke at once.

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

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

The page should show the selected stroke portion becoming visible over one second. The exact geometry depends on the path supplied by the application.

Projects that prefer package management can install the published package with the command documented in the README. The package name is `segment-js`.

npm install segment-js

The `package.json` declares `dist/segment.js` as the main file. The README does not provide a separate module import example, bundler configuration, or server-rendering example, so browser usage is the clearest documented path.

Delays, custom easing, and completion callbacks

A more coordinated effect can use all four documented `draw` options. The following is the README's example. It waits half a second, applies the local `cubicIn` easing function, enables circular drawing, and calls `done` when the animation ends.

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

The normalized easing contract is easy to implement for simple progress changes. The `cubicIn` example changes the animation's timing shape, while the README recommends using an easing function such as those from `d3-ease`.

Callbacks are useful for sequencing a second path segment or another interface action. The README does not specify what happens when several `draw` calls overlap, whether callbacks are removed after execution, or whether calling `draw` again cancels an existing operation. Sequential calls can use the documented callback, but concurrent scheduling should be verified against the implementation before being relied upon.

Using strokeDasharray with GSAP

segment-js can cooperate with an external animation library. Its `strokeDasharray` method is documented as the integration point for passing a selected path range into another tween. The README uses TweenLite with CSSPlugin and targets the path's `strokeDasharray` property.

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

In this arrangement, segment-js calculates the dash-array values for the requested `begin` and `end`, while TweenLite controls the interpolation over one second. This is different from calling segment-js's own `draw` method, which supplies duration, delay, easing, circular behavior, and completion handling through Segment's own interface.

The distinction is useful when a page already depends on GSAP or TweenLite and needs a common scheduling model. Segment's `strokeDasharray` is the narrower option if only the calculated SVG value is required. The README does not document a corresponding method for changing the dash offset, so integrators should follow the exact API exposed by the installed library and external animation package.

This approach also makes the library's scope clearer. Segment computes path-stroke data. It does not become the animation scheduler when `strokeDasharray` is used with another library.

Repository maintenance, dependencies, and licensing

The repository is not archived, and its last push was on 2026-09-19. That establishes recent repository activity, but the available release history lists only `v1.0.0` from 2016-01-13, while `package.json` identifies the current package version as `1.1.3`. The documentation does not explain the relationship between the stable release entry and the package version, so release cadence and compatibility guarantees cannot be inferred.

The development dependency set is dated. It includes `gulp` `^3.8.8`, `gulp-sass` `^0.7.3`, `gulp-autoprefixer` `1.0.0`, `gulp-uglify` `^0.3.1`, `browser-sync` `^1.3.7`, `gulp-rename` `~1.2.2`, and `gulp-insert` `~0.5.0`. The package declares Node.js `>=0.10.22`. These are package and build constraints, not browser support claims. The README does not document how to build the SCSS or dist files, and it gives no supported Node version for running Gulp 3.

Segment uses the MIT license. That permits use, modification, distribution, and sublicensing subject to the license conditions, but this review does not interpret those terms as legal advice. Consumers should retain the required license notice when redistributing the library or a derivative work. The main upgrade concern is checking browser behavior directly because the documented API surface is compact and the repository's development toolchain reflects an older Gulp generation.

Editorial conclusion

Adopt segment-js for browser projects that need controlled SVG path reveal effects or partial stroke animations. Do not choose it for shape morphing, layout animation, or broader SVG scene management unless path-stroke control is the required feature. Verify first that your target paths render as usable SVG geometry, then confirm the installed package entry point and test the exact `draw` ranges, easing behavior, and `strokeDasharray` output in each browser you support.

Frequently asked questions

Official sources

1. License: MIT
2. lmgonzalves/segment on GitHub
3. Project website
4. README
5. Releases