square to star

100%

square to star

✓ Published0🌍 Public

Last edited Mar 4, 2019

Created on Mar 4, 2019

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.

AI-generated description

Built with blockbuilder.org

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

83% match

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

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

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

74% match

Loading thumbnail…

Gist f4dd5c4b997e02efe9be

Four animated SVGs show a square deforming as its four corner points move along a continuously shrinking path. Each panel uses a different rule for selecting the next point: constant interpolation, gradually increasing step size, random step length, and a step inversely proportional to the remaining distance. The code relies on `d3.select`, `transition`, and `setInterval`, drawing line segments with `path` elements while updating point positions via the geometric helper functions defined in `geomtry.js`.

11wheel

73% match

Loading thumbnail…

fresh block

A single red square animates through a sequence of 180- and 360-degree rotations using SVG transitions. The example demonstrates chained `transition()` calls with `duration` and `delay` to create a two-step spinning effect around a fixed center point. Built with D3.js v1 modules including `d3-transition`, `d3-selection`, and `d3-color`, the code directly manipulates the `transform` attribute on a `<rect>` element. The square starts at coordinates (100,100) and rotates in place without moving its position, showcasing how D3 handles attribute tweening for transform strings. No data source is used; the visualization is purely a geometric animation.

GGerardoFurtado

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

72% match

Loading thumbnail…

along path

A steel-blue dot loops indefinitely along a black cubic Bézier curve drawn through seven fixed points on an SVG canvas. The path is hardcoded in the markup, while the points themselves are rendered as small circles. Using D3 v4, the animation repeatedly calls `transition.attrTween` with the `translateAlong` function, which relies on `path.getTotalLength()` and `path.getPointAtLength()` to compute the dot's position each frame, restarting the transition via `each("end", transition)`.

SSleepyHarry

71% match