Skip to main content
100%

Split an SVG path into pieces

✓ Published0🌍 Public
Aajayjayayy
Last edited Jul 26, 2018
Created on Jul 26, 2018

The visualization demonstrates how to split a single SVG path into 20 arbitrarily sized pieces, with each piece drawn as a separate colored segment. It first draws the full path with a stroke animation, then randomly divides the path into unequal portions and renders each segment sequentially with distinct colors and separator lines. The code uses D3 v4’s `d3.line` with `curveCardinal`, `getPointAtLength` to sample points along the path, and `transition` with delays to reveal pieces in sequence. A step-by-step instruction list highlights each phase of the process.

AI-generated description

This is an example of how to split an SVG path into an arbitrary number of pieces.

It is the technique used for The winding path to 270 electoral votes

forked from <a href='http://bl.ocks.org/bycoffe/'>bycoffe</a>'s block: <a href='http://bl.ocks.org/bycoffe/18441cddeb8fe147b719fab5e30b5d45'>Split an SVG path into pieces</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Point-Along-Path Interpolation

Two square Catmull–Rom spline paths are drawn in black, and clicking the SVG spawns colored circles that animate along the paths. Each circle moves along one path for the first 30% of its journey, then switches to the other path for the remainder, while a text label displays the animation progress. The example uses D3 v3 with SVG transitions and `transition.attrTween` to interpolate positions via the native `getTotalLength` and `getPointAtLength` methods on path elements.

Aantonyross
73% match
Loading thumbnail…

Animate SVG path on scroll

An SVG path is drawn incrementally as the user scrolls, stopping when it reaches a fixed horizontal marker line. The visualization uses D3 to map scroll position to the length of the path, animating the path’s stroke-dashoffset to reveal it progressively. A fixed marker div acts as the target line, and the path data consists of a series of points with varying x-coordinates, creating a jagged line. The example demonstrates scroll-driven SVG animation, built with D3 and Lodash, and is intended for use in an unreleased side project.

Aajayjayayy
73% match
Loading thumbnail…

SVG path

A single SVG path element extends dynamically from an initial point, generating a zigzag line that grows downward across a tall, scrollable canvas. Using jQuery and helper functions in JavaScript, the path’s `d` attribute is updated with random horizontal and vertical increments, creating a new line segment for each iteration. The SVG is rendered with CSS-styled stroke properties, while the code manipulates the path coordinates directly.

AAndrei Tuta
73% match
Loading thumbnail…

Animate SVG path on scroll

An SVG path of a hand-drawn line animates as the user scrolls, revealing the path incrementally down a tall 20,000-pixel viewport. Using D3 and Lodash, the example maps the browser’s scroll position to the length of the path, drawing only up to a fixed horizontal line (indicated by a marker div). As the user scrolls, the path appears to draw itself progressively, stopping when it reaches the marker. The visualization demonstrates a scroll-driven animation technique applied to a single SVG path with a minimal, fixed marker overlay.

Aajayjayayy
73% match
Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor
73% match
Loading thumbnail…

path testing

This SVG example demonstrates how D3.js v5 can draw a simple line path from an array of coordinate pairs. A single path element is generated by feeding a two-dimensional array of points into a d3.line function, which formats the coordinates into an SVG path string. The visualization centers the line within a larger SVG canvas using a group transform. The code relies on D3’s selection and append methods to build the graphic, while the line appears as a black stroke with a fixed width against a blank background.

Hhunsingeruk@gmail.com
72% match
Loading thumbnail…

Point-Along-Path Interpolation

Two nested, closed Catmull–Rom splines define the paths in this SVG animation. Clicking anywhere adds a colored circle that first collapses to the inner path’s start, then follows the outer path via a tween that switches between the two paths partway through the animation. The code uses D3 v3’s `transition.attrTween` with the native SVG `getTotalLength` and `getPointAtLength` methods to interpolate each circle’s position, while a text element displays the tween progress as a percentage.

Aantonyross
72% match
Loading thumbnail…

Untitled

A black cubic Bézier path is drawn on an SVG canvas using D3 v4, with its total length queried via `getTotalLength()`. The example marks two points sampled along the path at 50% and 78% of its length, using `getPointAtLength()` to position small red and blue circles. A green line is then constructed between the two points and extended backwards to the canvas edge, demonstrating how to compute a secant line from arbitrary positions along a vector path. The visualization uses inline SVG elements created through D3's selection API, with styling applied via a linked CSS file.

RRSSBDAE
72% match