star circle spin - canvas

100%

star circle spin - canvas

✓ Published0🌍 Public

Last edited May 2, 2019

Created on Apr 1, 2019

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.

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>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/509a44f67b7f68415ab1b50feef4f575'>grid squares to star circle spin</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

84% match

Loading thumbnail…

stars

This example animates a multi-line text introduction by first drawing the words along SVG `<textPath>` elements, then replacing the text with thousands of small, glowing star-shaped particles. The visualization uses D3 v5 to lay out the text on curved and straight paths, computes path endpoints and text lengths to align the words, and then spawns a canvas-based particle system with custom star sprites and additive blending. Each word is revealed by a burst of stars that traces along its path, while gradient fills and blur/contrast filters create a luminous, space-like effect. The animation cycles through the phrases, with mouse interaction disabled to keep the focus on the choreographed particle motion.

EEE2dev

78% match

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

77% match

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

77% match

Loading thumbnail…

circle-lines

Nine circles arranged in a grid have points that orbit their centers, connected by lines between every pair of circles. The lines form a dynamic, web-like pattern that evolves over time. Built with D3.js, the visualization uses a canvas element with the `globalCompositeOperation` set to `xor` to create the intersecting line effects. An animation loop driven by `d3.timer` updates the positions of the orbiting points and redraws the connections, creating a continuously changing geometric composition.

11wheel

76% match

Loading thumbnail…

Untitled

A star-like geometric figure is drawn on an SVG canvas, consisting of five points arranged in a circle around a central hub. Radial spokes connect the center to each point, while connecting lines form the outer pentagon shape, with small circles marking each vertex. The visualization is built using D3 v7, where `d3.range` generates the point coordinates via trigonometric calculations, and chained selection methods like `selectAll` and `enter` append the SVG circles and lines.

Mmasphel

75% match

Loading thumbnail…

Circular Geometric Patterns

A grid of overlapping circular geometric patterns radiates from the center of an SVG canvas, each layer composed of translucent circles and a blue polyline connecting nodes arranged around a circle. The visualization iterates through combinations of node counts and skip factors, generating distinct starburst-like shapes. Using React, it renders each pattern as a `Star` component that computes node positions with trigonometry and draws circles plus a `d3.line` path with `curveLinearClosed`. The code leverages `d3.range` to generate data and controls parameters like radius and center coordinates.

CCurran Kelleher

75% match

Loading thumbnail…

stars

This example animates the words “My favorite cities are New York and Paris” as glowing, star-like particles that explode and reform along wavy SVG text paths. It combines SVG for the text layout and paths with Canvas for the particle system, using D3 v5 and the WebFont loader to ensure the custom font is ready before the animation starts. Each word travels along its own path, with a sinusoidal curve for the final word, while colored particles trace the text. A background image, gradient fills, and star-shaped particle textures create a luminous, space-like effect. The animation also includes interactive mouse-based forces (configured via `starOptions`), a dark background with blur/contrast filters, and options to show the paths and endpoints for illustration. The example is part of a series exploring animated text intros with different effects like rotation and gradients.

EEE2dev

75% match