grid squares to star circle

100%

grid squares to star circle

✓ Published0🌍 Public

Last edited Mar 5, 2019

Created on Mar 4, 2019

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

grid squares to star circle spin

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.

PPatrick Wojda

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

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

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

77% 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 Grid

A square grid visualization displays quantities from zero to 9,999 as a hundred-by-hundred matrix of small squares, grouped into rows and blocks to represent powers of ten. The animation randomly resets the target count, then uses `d3.select` and `d3.range` to update the `rect` elements via `.transition()` with staggered delays, while a text label interpolates its number using `d3.interpolateNumber` and a custom tween. The rendering uses SVG within a 960×990 canvas, with cell and group spacing computed from the available width.

GGerardoFurtado

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

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

75% match