grid squares to star circle spin

100%

grid squares to star circle spin

✓ Published0🌍 Public

Last edited Mar 22, 2019

Created on Mar 5, 2019

Nine blue star shapes begin as a 3x3 grid of squares, then morph into stars and move into a circular arrangement. The `d3` v4 library drives the animation, using SVG `use` elements, `transition.attr` for position changes, and a recursive `transition` callback to continuously rotate the entire circle. Each star spins around the circle’s center via trigonometric calculations with `Math.cos` and `Math.sin`, while the initial shape morph uses `d3.selectAll().transition()` with an ease function. The rendering uses SVG paths and elements, with no external data source.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/69897de1f517f086fa031823e80dbb45'>square to star</a>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/5309f6a56e23059a3a79185a7b78b7a2'>grid squares to star circle</a>

mit Licensed

Similar vizzes

Loading thumbnail…

grid squares to star circle

Nine equal star shapes begin in a three-by-three grid and repeatedly transition into positions evenly spaced around a circle, while their outlines morph between a star and a square path. The animation uses D3 v4’s `transition.attr` to update `transform` and `d` attributes on SVG `use` and `path` elements, with `d3.easeLinear` and `d3.easeExp` controlling motion. The shapes are defined as reusable SVG paths via a `defs` element, and the cycle runs indefinitely using recursive `setTimeout` calls.

PPatrick Wojda

92% match

Loading thumbnail…

star circle spin - canvas

Nine red stars orbit a central point on a 500-pixel Canvas, each tracing a circular path while collectively spinning as a group. Built with D3.js v4, the animation uses custom shape elements to store angular state, updating each star’s position every 5 milliseconds. The stars’ coordinates come from a hardcoded SVG path, scaled and offset dynamically per iteration, creating a smooth, rotating constellation effect.

PPatrick Wojda

84% match

Loading thumbnail…

square to star

A yellow star-shaped SVG path morphs into a square, then back, in a continuous loop. The animation uses D3 v4 transitions with an exponential ease, toggling the path's `d` attribute between two predefined coordinate strings via `transition.attr`. Star and square data are hardcoded as SVG path strings, and the loop is driven by recursive `setTimeout` calls alternating between shapes every 1.5 seconds.

PPatrick Wojda

78% match

Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel

78% match

Loading thumbnail…

Circles and rectangles grid

A grid of green rectangles is punctuated by circles that animate on top of them. Each circle transitions its position, moving from its initial coordinate to the center of its corresponding rectangle, then changes fill color to yellow with partial opacity. Built with D3 v5, the example uses SVG elements and chained `transition().duration()` calls to sequence the movement and color changes across the entire grid simultaneously.

NNita

76% match

Loading thumbnail…

Square Circle Spiral Illusion

Six concentric rings of small squares rotate at different speeds via SVG transforms, creating a spiral-like square illusion against a gray background. Alternate squares are stroked white for contrast. The animation uses `d3.timer` and `d3.selectAll` with `attr("transform")` to update rotation based on elapsed time, while each ring’s squares are generated from `d3.range` and positioned with `translate` and `rotate`. The code runs on D3 v3 and relies on SVG `rect` elements.

Mmbostock

76% match

Loading thumbnail…

Fork of D3 Starter

A grid of fifteen circles undulates vertically and changes radius in a continuous sine-wave pattern, creating a flowing wave effect across the screen. Running on a timer that updates every 20 milliseconds, the animation redraws each circle's y-coordinate and radius based on a sine function. The code uses D3 v6’s `select`, `range`, and data joins with `join('circle')` to bind and update SVG circle elements, while the viewport-sized SVG fills the browser window.

Wwgloss

75% match

Loading thumbnail…

Fork of Fork of D3 Starter

A grid of 40 white circles arranged horizontally on a black SVG canvas undulates vertically in a smooth, periodic wave, with each circle’s height determined by a sine function of its index and a shared time parameter. Using D3 v6, the example selects the SVG element, binds data to an array of 40 values, appends circle elements, and animates them with `d3.timer`, updating the `cy` attribute each frame. The rendering relies solely on D3’s selection and data-join methods without any external data source.

DDavid Sanderson

75% match