Rotating Shape Transitions

100%

Rotating Shape Transitions

✓ Published0🌍 Public

Last edited Sep 18, 2016

Created on Sep 18, 2016

A polygon rotates continuously on a turntable-style backdrop, cycling through a sequence of geometric shapes while colored dots and connecting lines trace the path of each vertex between shapes. A vertical slider controls the rotation speed, displayed as revolutions per minute, with the shape pausing when the slider is set to zero. The animation relies on the custom d3-shape-tween library to interpolate between polygons of different vertex counts, adding points along edges as needed, and draws blue "wire" lines from old vertices to new ones to clarify the transition.

AI-generated description

Partially an update to one of <a href="http://bl.ocks.org/alexmacy/06cf037853999219cd82bc79edc4aee6">my previous blocks</a>, the original intention here was to more clearly convey what is happening during the transitions between shapes by drawing lines from the vertices of the old shape to those of the new shapes.

It uses a kinda-sorta add-on I made called <a href="https://github.com/alexmacy/d3-shape-tween">d3-shape-tween</a>, which helps smoother transitions between complex shapes, especially when transitioning between shapes of varying complexity.

I also had some fun experimenting with rotating the shape as if it's on a turntable...

mit Licensed

Similar vizzes

Loading thumbnail…

Custom Shape Tweening

This example demonstrates smooth transitions between custom polygons in D3 v4, addressing limitations in Mike Bostock’s original shape tweening approach. The visualization morphs between a California-shaped polygon and other custom polygons by aligning starting points, matching point counts, and ensuring consistent orientation. Using `d3.polygonArea()` to verify winding direction and a hidden SVG path to proportionally resample points, it produces clean, predictable shape transformations. The animation is rendered in SVG, with each shape transitioning seamlessly to the next in an animated loop.

Aalexmacy

76% match

Loading thumbnail…

Smoother polygon transitions

A state morphs into the next in an animated sequence, with the polygon smoothly transitioning between shapes while yellow and magenta dots mark corresponding vertices. The code uses D3.js and TopoJSON to load U.S. state boundaries, then adds evenly spaced points to equalize vertex counts and finds the optimal winding by minimizing squared distances between point pairs. SVG and D3 transitions animate both the path and circles as states cycle through a shuffled order.

FFrissAnalytics

76% match

Loading thumbnail…

Shape Tweening

A D3.js shape-tweening animation morphs the outline of California into an equivalent circle and back again, repeatedly. The SVG path’s `d` attribute is updated through chained transitions, each lasting five seconds, using the projected polygon coordinates from the included GeoJSON file. The code computes a circle with matching perimeter length and area, placing the state’s border points along it via a custom `circle` function.

FFrissAnalytics

73% match

Loading thumbnail…

Triangle Rotate

A triangle rotates in place against a backdrop of horizontal gridlines, using a looping animation to create a continuous spinning effect. The visualization is built with D3 v5 and SVG, leveraging D3 transitions and the `transition.attr` method to apply incremental rotations to a group element. Static horizontal lines and a red reference point highlight the triangle's pivot, while the code structure separates translation and rotation groups for clarity. The animation runs indefinitely by recursively calling the animate function upon transition completion.

CChristoph Diefenthal

72% match

Loading thumbnail…

Shapes Practice

Animated SVG composition of 300 rectangles and 300 circles, rendered with D3 v6 in a React framework. Rectangles initially draw as thin gray strokes, then transition to transparent fills with pink outlines before expanding to fill the entire canvas. Circles begin as large transparent rings with thin white strokes that thicken, then shrink to small points while drifting downward. Transitions sequence over 15-20 second durations, creating a slow rhythmic interplay of shape transformations across the 960x500 viewport.

MModalMBS

72% match

Loading thumbnail…

Animate rotations

The visualization animates rotating geometric shapes (from `d3.symbols`) that slide across the screen, acting as masks to selectively reveal or hide vertical and horizontal stripes. Two overlapping mask layers, one inverse, alternate shapes every five seconds with a two-second slide transition. Built with React and D3, it uses `d3.select`, `d3.transition`, and SVG `<mask>` elements to animate the shape paths and dynamically update the stripe rectangles. The result is an endlessly changing, layered pattern of stripes and symbols.

Ddanperkins

72% match

Loading thumbnail…

Rotating Voronoi

Rotating Voronoi shows a set of curved, teal cells that continuously morph as the underlying points move in circular paths. The animation uses D3’s `d3.geom.voronoi` to compute polygons from moving points, which are then clipped to a rectangular boundary. Each polygon side is subdivided into three equal segments and joined with a `basis-closed` line interpolator, creating the smooth curved cell shapes. The SVG paths animate via D3’s timer, with point positions updated over time based on angular velocity.

Aajayjayayy

72% match

Loading thumbnail…

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

11wheel

71% match