Animated subpath

100%

Animated subpath

✓ Published0🌍 Public

Last edited Apr 4, 2017

Created on Apr 4, 2017

A solid gray curving path is drawn with D3 and SVG, while a black animated segment travels along it. The code uses `d3.timer` to continuously update the path’s `stroke-dasharray`, cycling a four-part pattern (gap, visible snake, and remaining gap) to create a smooth looping motion. The path geometry comes from an SVG `d` attribute, and its total length is computed via `path.getTotalLength()` to calculate the segment proportions.

AI-generated description

Animating a portion of a larger path with a four-part stroke-dasharray pattern.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/15345bbe4e4799a19a21b4acc88dcced'>Animated subpath</a>

mit Licensed

Similar vizzes

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

77% match

Loading thumbnail…

SVG path animation

An animated marker follows a wiggly SVG path while the path itself appears to draw itself in a continuous loop. The example uses D3.js version 3 to load an external SVG file via `d3.xml` and then animates both the path’s `stroke-dasharray` and the marker’s position using `transition.attrTween` and `path.getPointAtLength`. The marker is a red circle repositioned at each animation tick, while the dash array interpolation creates the synchronous drawing effect. The animation runs infinitely via a recursive transition callback.

KKoGor

76% match

Loading thumbnail…

Stroke Dash Interpolation

A closed path, rendered as a dark stroke using a cardinal-closed line generator, loops through seven points on an SVG canvas. A dashed gray duplicate of the same path overlays it, while the dark stroke animates its `stroke-dasharray` from a zero-length dash to the full path length and back, creating a continuous drawing effect. The animation uses `transition.attrTween` with `d3.interpolateString` and `getTotalLength()` to compute the path length, cycling indefinitely via the transition’s `end` event. The example relies on D3 v3’s `d3.svg.line` and SVG path elements.

Mmbostock

74% match

Loading thumbnail…

Data Folowing a Path

A collection of pink circles animates along a fixed black path, each circle traveling from the path’s start to its end in sequence. The visualization shows how data points can follow a predefined geometric route, with each circle representing a discrete step. The code uses D3 v5’s `scaleLinear` to map indices to path lengths, and `transition.attrTween` with `getPointAtLength` to move each circle along the SVG path. The animation uses `d3.easeCircleInOut` for smooth acceleration and deceleration, with the path defined by a complex Bézier string.

HHalian Vilela

74% match

Loading thumbnail…

along path

A steel-blue dot loops indefinitely along a black cubic Bézier curve drawn through seven fixed points on an SVG canvas. The path is hardcoded in the markup, while the points themselves are rendered as small circles. Using D3 v4, the animation repeatedly calls `transition.attrTween` with the `translateAlong` function, which relies on `path.getTotalLength()` and `path.getPointAtLength()` to compute the dot's position each frame, restarting the transition via `each("end", transition)`.

SSleepyHarry

73% match

Loading thumbnail…

Path Tween

This example demonstrates smooth path interpolation between two SVG shapes defined by cubic Bézier curves. A black path morphs between two distinct configurations over a two-second animated loop, using SVG’s getPointAtLength and getTotalLength methods to uniformly sample points at four-pixel intervals. The transition replaces the original curve with a polyline for interpolation via d3.interpolate, then restores the Bézier path upon completion. The animation runs in d3 v4 with transition.attrTween, alternating between the two path definitions indefinitely.

Mmbostock

73% match

Loading thumbnail…

Animated Arcs

Four colored arc segments rotate continuously around a central point, changing their start and end angles to new random positions every few seconds. The animation uses D3 v4’s `d3.interval` to trigger periodic updates, and each transition relies on `transition.attrTween` with a custom `arcTween` function that interpolates between angle values using `d3.interpolate`. The SVG paths are generated by a `d3.arc()` generator, with each arc assigned a fixed inner and outer radius, forming concentric rings. The data is procedurally generated JavaScript, with random start angles and arc lengths derived from a random score.

TThanaporn-sk

73% match

Loading thumbnail…

path with d3 - 1

A simple SVG line chart demonstrates D3's `d3.line()` path generator. Five coordinate pairs define a polyline rendered as a thick black path across a 960 by 500 canvas. A green circle with a CSS hover animation (class `pulseCircle`) sits at the first data point, scaling from zero to four times its size over two seconds using keyframes. The example shows D3 v7 appending SVG elements and generating path data from an array of points, with the circle's interactive pulse effect driven by vanilla CSS rather than D3 transitions.

NNita

72% match