Spiral Circle

100%

✓ Published0🌍 Public

Last edited Oct 3, 2018

Created on Apr 22, 2015

Two groups of 200 white squares with black outlines form a spiral pattern, one rotating clockwise, the other counterclockwise, within circular clips. Animated by a timer, each square orbits a circle while spinning on its own axis, creating a hypnotic, ever-changing geometric illusion. This D3 v3 example uses SVG, `d3.range`, `d3.timer`, and `selectAll` with `append` to build and animate the rects, clipped by `clipPath` definitions for upper and lower halves.

AI-generated description

Inspired by an untitled GIF by PATAKK and Hypnos by Hakim El Hattab.

gpl-3.0 Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Spiral Triangle

A mesmerizing, topologically impossible animation shows a spiral of black-stroked white squares rotating and translating within two triangular clipping regions. The piece recreates a GIF by PATAKK, using an SVG scene with upper and lower clip paths. The code uses d3.v3’s `d3.selectAll`, `d3.range`, and `d3.timer` to drive square transforms, while each square’s position and rotation are computed from a normalized index and elapsed time.

Mmbostock

84% match

Loading thumbnail…

Spiral Triangle II

Three rotating triangles made of small squares converge in the center, with each square cycling through a smooth cubehelix color palette. The animation uses multiple `d3.timer` callbacks to update square positions and rotations, while `d3.scale.cubehelix` maps time-based domain values to color. Sixty squares per triangle move horizontally and spin at a constant angular speed, clipped to two regions that divide the SVG canvas. The code relies on D3 v3 selection methods and SVG transforms to coordinate the layered motion.

Mmbostock

84% match

Loading thumbnail…

Spiral Triangle III

A grid of 71 small cross-shaped symbols rotates in a spiral pattern around a triangle, with colors shifting through a cubehelix scale. The animation is clipped into upper and lower regions of the SVG canvas, and each symbol moves outward while rotating at a constant angular speed. The code uses D3 v3's `d3.timer` for animation, `d3.svg.symbol` for cross paths, and a custom `d3.scale.cubehelix` with three HSL stops to interpolate fill colors over time.

Mmbostock

80% match

Loading thumbnail…

A tweetable d3 animation

A single animated SVG visualization shows 100 circles arranged in a shifting radial pattern. The code uses a `d3.timer` loop to update circle positions, with each circle’s radius and angle computed via sine and cosine functions. The circles are drawn with D3’s `selectAll` and `data` join, appended to an SVG group element. Styling is minimal, with unfilled circles stroked in dark gray on a light background. The animation continuously couples each circle’s distance from the center to time, creating a pulsating, spiral-like effect.

CColinEberhardt

79% match

Loading thumbnail…

spinning-spiral

A spiral of white line segments rotates continuously, expanding and contracting as its radial offset shifts over time. The animation uses D3’s `d3.timer` to update an array of 480 points each frame, computing polar coordinates with `d3.scale.linear` for angle and distance, then rendering them as SVG `path` elements with `join('L')`. The code draws a single path whose data changes cyclically based on a sine wave, producing a smooth pulsing motion against a dark background.

11wheel

78% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

78% match

Loading thumbnail…

Spiral Visualization with D3

This example renders a colorful spiral of 50 circles connected by thin, semi-transparent lines. Generated procedurally using trigonometric functions, the circles vary in size and hue, creating a dynamic, decorative pattern against a dark background. The visualization is built with D3 v7, using selections and data joins to efficiently draw and update both the `<circle>` and `<line>` elements. The code recalculates the layout on window resize to maintain its centered composition.

VVinayak Revankar

78% match