Path Tween

100%

✓ Published0🌍 Public

Last edited Jan 26, 2017

Created on Jan 26, 2017

This example shows a smooth animated transition between two SVG path shapes, alternating back and forth indefinitely. The code samples both the source and target paths uniformly using the SVG `getPointAtLength` method, then interpolates the corresponding points to create a piecewise linear curve during the transition. After each cycle, the path is restored to its original cubic Bézier form. The animation uses D3 v4’s `transition.attrTween` and `d3.easeLinear` easing, with a precision of 4 pixels for sampling.

AI-generated description

This example demonstrates path interpolation using SVG's getPointAtLength feature. The source path and the target path are sampled uniformly using a configurable precision in pixels (here, 4px). During the transition, the path is replaced with a piecewise linear curve, or polyline, for easier interpolation. When the transition finishes, the path is restored to the original cubic Bézier. This technique is handy because it works for any path expressible with SVG's path data mini-language.

See also the circular shape tweening example.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3916621'>Path Tween</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/d0f28de24658467d48053ef6e39e8413'>Path Tween</a>

gpl-3.0 Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Point-Along-Path Interpolation

A small circle animates repeatedly along a fixed arc path, demonstrating how to interpolate a point’s position along an existing SVG path. The example uses D3 v3 and SVG’s native `getTotalLength` and `getPointAtLength` methods to compute the circle’s coordinates at each step. A `transition.attrTween` drives the animation, updating the circle’s `transform` attribute over five seconds, then restarting it via the transition’s `each("end")` event. The path itself is drawn with `d3.svg.arc` and rendered as a gray filled shape with a pointer cursor.

Mmbostock

81% match

Loading thumbnail…

Untitled

This example animates the morphing of one SVG path into another using D3’s `transition.attrTween` and a custom path interpolation function. The path alternates between two cubic Bézier shapes in an infinite loop, with each transition lasting two seconds and using uniform distance sampling for smooth point-by-point interpolation. The code references `d3.select`, `d3.active`, and `getTotalLength`, while importing D3 v6 from a CDN. The included `province.csv` file contains COVID-19 statistics for Chinese provinces, though it is not loaded or visualized in the rendered output.

Vvivianaaai@qq.com

79% 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

78% match

Loading thumbnail…

Path Transitions

A real-time scrolling line chart demonstrates a surprising visual artifact when animating the path. The chart displays a sliding window of 40 random data points, with new values entering from the right and old ones exiting left. The example uses D3's `transition` API and SVG path interpolation to animate the line. It reveals that default path interpolation parses the `d` attribute's numbers and pairs them in order, causing vertical "wiggling" as control points move in place. The solution involves interpolating the chart's transform instead of the path data.

GGerHobbelt

78% match

Loading thumbnail…

Named Transitions

This example demonstrates concurrent transitions on a single SVG path by using named transitions in D3 3.5. A black cross-shaped symbol, rendered with a red stroke, rotates continuously via the “twizzle” transition while its stroke width pulses with the “plonk” transition. Each animation uses `transition.attrTween` and `transition.style` with `d3.interpolateString`, and recursively reschedules itself with `each` and `transition.duration` to create an ongoing, non-interfering loop.

Mmbostock

77% match

Loading thumbnail…

Spline Transition

A path of normally distributed random data, rendered as a smooth basis-interpolated line, continuously scrolls leftward as new points append and old ones shift off. The animation loops by chaining transitions with `d3.active` and `transition.on`, updating the `d` attribute via `d3.line` before translating the SVG path. A `clipPath` rect hides the sliding tangent change at the edges. The example uses d3.v4, random samples from `d3.randomNormal`, and SVG axes with `d3.axisBottom` and `d3.axisLeft`.

Mmbostock

77% match

Loading thumbnail…

FFT-based transition on timelines

This example demonstrates a three-stage transition between two erratic timelines, using simplified path versions to make the morphing easier to follow. The initial path first simplifies, then morphs into the final path’s simplified form, and finally complexifies into the final shape. Two models compute these simplifications: a Fast Fourier Transform (FFT) and a Moving Average. The code uses D3.js v4 with SVG and animated transitions, applying `d3.line` and `d3.curveBasis` to render the paths, with data from a CSV file.

KKcnarf

76% match