Concurrent Transitions II

100%

Concurrent Transitions II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 25, 2013

A black cross glyph rotates continuously while its red stroke pulses in width. The animation uses concurrent D3 transitions on a parent `g` element and a child `path` element, with `transition.attrTween` interpolating a rotation transform from 0 to 720 degrees and `transition.style` animating `stroke-width` between 30 and 0 pixels. The SVG path is generated with `d3.svg.symbol().type("cross")`.

AI-generated description

An alternative approach to concurrent transitions, here using concurrent transitions on a parent g element and a child path element.

gpl-3.0 Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Concurrent Transitions

Two concurrent D3 transitions animate a single SVG path element rendered as a black cross with a red outline. The *twizzle* transition continuously rotates the path 720 degrees, while the *plonk* transition repeatedly pulses its red stroke-width between 0 and 30 pixels. The code achieves concurrency by running each `transition.tween` on separate dummy objects (`twizzleLock` and `plonkLock`) instead of the path itself, using `d3.interpolateString` to drive the custom tweens and `setTimeout` for looping.

Mmbostock

86% match

Loading thumbnail…

Custom Tweens

A single cross-shaped symbol, drawn with the SVG path API via `d3.svg.symbol`, rotates continuously in the center of the frame. The example demonstrates how a custom transition interpolator overrides default behavior: `transition.attrTween` combines `d3.interpolateString` to animate the transform attribute from "rotate(0)" to "rotate(720)", enabling a full double spin that the standard numeric interpolation would ignore. Each ten-second transition loops indefinitely through the `each` event, showcasing attribute tweening in a minimal SVG animation.

Mmbostock

76% match

Loading thumbnail…

Chained Transitions

Fifty black circles, each representing one step in a 50-point scale, are arranged along the left edge of an SVG. Chained transitions, created using `transition.transition` and `d3.active`, repeatedly sweep each circle horizontally across the frame and back, with staggered delays creating a cascading wave effect. The circles’ fill colors interpolate between light yellow and dark blue via a linear scale with `d3.interpolateHcl`. The animation runs concurrently on all elements, inheriting the original transition’s reference time to ensure synchronized looping.

Mmbostock

74% 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…

Spiral Triangle III

A grid of 71 small cross-shaped symbols rotates in a spiral pattern around a triangle, with colors shifting through a cubehelix scale. The animation is clipped into upper and lower regions of the SVG canvas, and each symbol moves outward while rotating at a constant angular speed. The code uses D3 v3's `d3.timer` for animation, `d3.svg.symbol` for cross paths, and a custom `d3.scale.cubehelix` with three HSL stops to interpolate fill colors over time.

Mmbostock

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

71% match

Loading thumbnail…

SVG path animation

A red dot animates along a black, wiggly SVG path, looping infinitely. The path is defined in an external SVG file. Built with D3.js v3, the visualization loads the SVG via `d3.xml`, extracts the path with a `d3.select`, and uses a `transition.attrTween` to move a circle marker based on `getPointAtLength` and `getTotalLength`, replicating Mike Bostock’s point-along-path interpolation example.

KKoGor

70% match