Transform Transitions

100%

Transform Transitions

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 7, 2011

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

AI-generated description

D3 2.5.0 supports matrix decomposition for animating 2D transforms. Any SVG transform attribute is decomposed into a canonical representation of translate, rotate, scale and skew. This allows two arbitrary transforms of different types to be transitioned smoothly—say from a simple translate to a scale plus rotate. These features are supported automatically by your browser for CSS3 transitions, but now you can have them in JavaScript for SVG, too!

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis

93% match

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Mmbostock

89% match

Loading thumbnail…

Transform Interpolation

Two D3 v3 SVG animations demonstrate alternative interpolation of CSS transforms. Left, `d3.interpolateTransform` decomposes transforms canonically, so a transition from "rotate(180)translate(0,-100)" to "rotate(360)translate(0,-100)" animates via a translate-rotate path. Right, a `d3.tween` using `d3.interpolateString` interpolates the raw transform strings, rotating angle only. Each animation cycles with `transition.attrTween` and a recursive `each("end")` handler, with a circle and label centered in each group.

Mmbostock

79% match

Loading thumbnail…

rect-spiral

An animated grid of squares repeatedly collapses to points and expands into colored rectangles against a dark background. Each cycle, a new set of squares appears, and the staggered delays create a cascading effect as they grow to full size. The code uses D3.js, lodash, and custom d3-starterkit helpers, appending `rect` elements to an SVG and animating their `width`, `height`, `x`, and `y` attributes via `transition()`. The grid positions are derived from dividing the viewport into a matrix, and each square’s fill color is randomly generated.

11wheel

79% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

78% match

Loading thumbnail…

SVG Fun!

This example demonstrates a playful grid of twelve pink rectangles rendered as SVG elements. The visualization shows how CSS transitions and hover states can animate the shapes, changing their fill color and stroke width on mouse interaction. The code uses plain SVG and CSS, with rectangles defined in the HTML and styled via a `rect` selector. The transition property applies a 1000-millisecond easing effect, while the `:hover` pseudo-class modifies the visual style. The page is structured with a fixed 960x500 SVG viewport and a margin around the body.

Vverrasc

78% match

Loading thumbnail…

transition exploration -- first trials with transitions

A sequence of chained SVG transitions animates rectangles, lines, ellipses, and polygons through shifting colors, stroke widths, positions, and shapes, including skewing, translation, and corner rounding. Built with D3 v6 in a React-accessible setup, the code uses `selection.transition().duration()` to chain staggered state changes on each element. The visual explores how interpolated attributes like `fill`, `stroke`, `transform`, and `points` evolve over time, producing a choreographed, abstract composition on a blank canvas.

MModalMBS

78% match

Loading thumbnail…

Rounded Rectangles

A grid of 25 rounded rectangles animates toward the mouse position while continuously rotating, with each rectangle’s fill color drawn from a categorical scale. Driven by a d3.timer, each tick updates the rectangles’ center coordinates and rotation angle based on their distance to the cursor. The SVG shapes use `rx` and `ry` attributes, and the code leverages D3’s data binding, `d3.scale.category20c`, and a `mousemove` event to track the pointer. This example adapts a Paper.js demo into D3 with animated transforms.

Mmbostock

77% match