Skip to main content
100%

Rotating Voronoi

✓ Published0🌍 Public
Aajayjayayy
Last edited Jul 26, 2018
Created on Jul 26, 2018

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.

AI-generated description

Mario Klingemann has made some beautiful Voronoi diagrams. This is my attempt to recreate them using D3. To achieve the curved cells, each side of the Voronoi polygon is subdivided into three equal-length segments and then joined using the "basis-closed" line interpolator. There are some discontinuities in the animation when the sides of a polygon approach zero which could likely be avoided by adding a minimum-length threshold to the subdivision.

If you’d like to see other instances of this pattern, Mario describes the algorithm on Flickr.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4636377'>Rotating Voronoi</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Rotating Voronoi

Rotating Voronoi shows a black-and-white field of curved cells generated from continuously moving points. Multiple rings of points orbit at different speeds and radii, causing the Voronoi diagram to shift and deform fluidly over time. The animation uses the D3 `d3.geom.voronoi` to compute the cells, clips them against a rectangular boundary, and subdivides each polygon edge into three equal segments before applying the `basis-closed` interpolation to create the smooth, organic curves. The SVG paths are re-rendered each frame with `d3.timer`.

Mmbostock
92% match
Loading thumbnail…

Rotating Voronoi in d3v4

A rotating Voronoi diagram animates dozens of moving points whose cells constantly morph, producing intricate curved patterns against a black background. The animation derives from points arranged on circular paths that rotate at varying speeds and radii, while the Voronoi tessellation updates each frame. The code uses d3.voronoi to compute the polygons and d3.line with the curveBasisClosed interpolator to render them. A custom resample function subdivides each polygon edge into three segments before drawing, creating the smooth, curved cell boundaries. The animation runs continuously via d3.timer, with points’ positions updated directly in response to elapsed time.

PPhilippe Rivière
91% match
Loading thumbnail…

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

PPhilippe Rivière
89% match
Loading thumbnail…

Voronoi Shuffling v3

Voronoi Shuffling v3 animates a set of 100 randomly placed points and their corresponding Voronoi cells, which continuously redraw every few seconds as the points jump to new random positions. The SVG paths representing each polygon transition smoothly between states using D3 v4’s `transition` methods, with a transform offset applied before updating the `d` attribute to avoid abrupt reshaping. The code uses `d3.voronoi` to compute cell polygons and includes extra overlapping points in the path data to ensure each polygon has enough vertices for seamless interpolation. Circles mark the points themselves, and both points and cells shift together over a 3-second duration.

Aalexmacy
84% match
Loading thumbnail…

Voronoi Spirals

Randomly placed points generate Voronoi cells that gradually spiral inward, cycling through a Cubehelix color scale over a five-second animation. The d3-voronoi layout computes the initial polygons, then each frame the code shifts a vertex and interpolates a new point along each cell’s first edge, closing the path and filling it with a color based on elapsed time. Rendered on a Canvas via the d3.timer API, this creates a continuous, organic morphing effect.

Mmbostock
84% match
Loading thumbnail…

Voronoi Shuffling v2

A collection of Voronoi cells continuously shuffles across the screen as their generating points jump to new random positions. The cell outlines remain visible while their filled areas stay transparent, and the points themselves appear as small black dots. The animation uses D3 v4’s `d3.voronoi` layout to compute polygons from 100 random coordinates, with SVG `path` and `circle` elements updated via chained `transition` calls that first offset each polygon by its point’s movement and then reset it to the new cell shape.

Aalexmacy
84% match
Loading thumbnail…

Rotating Distance-limited Voronoi

This example animates a rotating Voronoi diagram where cell boundaries are clipped by a dynamically shrinking maximum distance from each seed point. Multiple concentric rings of points orbit at different radii and speeds, creating a shifting mosaic of white polygons on a black background. The code uses the d3.distanceLimitedVoronoi plugin with d3.v3, recomputing the distance limit from a cosine function each frame via d3.timer. The SVG paths update continuously, with point positions driven by nested timers for circular motion.

KKcnarf
83% match
Loading thumbnail…

Voronoi Spirals II

A Voronoi diagram partitions a canvas into cells around randomly placed sites; this animation continuously warps those cells by rotating each polygon's vertices, creating a swirling, spiraling effect. The fill color shifts through a smooth spectrum as the animation progresses over five seconds. The code uses d3.voronoi to compute the polygons, d3.timer for the animation loop, and d3.scaleCubehelix to interpolate the cell colors. Each frame, the first vertex of a cell is moved toward the next, shortening the polygon's edge before pushing a new point into the array. The rendering is done via the Canvas 2D API.

Mmbostock
82% match