Skip to main content
100%

Wiggling Circles

✓ Published0🌍 Public
Aangusgrant
Last edited Oct 17, 2016
Created on Feb 4, 2020

Four hundred colored circles wander randomly across a canvas, each assigned one of five warm hues by a D3 ordinal color scale. The animation runs on a `d3.timer`, updating each circle’s position by small random steps and redrawing them with Canvas 2D `arc` calls. The `globalCompositeOperation` set to `hard-light` blends overlapping shapes, creating shimmering color interactions. The data is procedurally generated in-browser, with random x/y coordinates, radii, and group assignments, and the rendering clears the canvas each frame before repainting.

AI-generated description

Similar vizzes

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
82% match
Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel
82% match
Loading thumbnail…

Messing around with Sine Wave Circles

Four overlapping sine and cosine waves are rendered as horizontal rows of blue, crimson, turquoise, and orange circles. Each wave uses a separate D3 group and a `d3.timer` to animate the vertical positions of 50 circles per row in real time. The animation is driven by `Math.sin` and `Math.cos` functions with a shared time parameter, creating contrasting phase-shifted motion across the four color-coded sets. Circles are positioned using D3’s data join and `attr` updates, with an SVG canvas sized 960 by 500 pixels.

SSebastian Barrett
81% match
Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock
81% match
Loading thumbnail…

Random Circles

Fifty randomly positioned and sized circles drift across the browser viewport in this d3.v6 example. Each circle's location updates on a timer, shifting by small random increments at every tick, creating a subtle Brownian-like motion. The visualization uses the `d3.range` function to generate the initial dataset, `d3.select` to create the SVG canvas, and the `d3.timer` API to drive the animation loop. Circles are styled as steelblue fills via CSS, with a light gray page background.

Mmbooch22
80% match
Loading thumbnail…

Circles01

A dark canvas displays nearly two hundred translucent, colored circles that drift and swirl in a slow, hypnotic dance. The motion is generated by applying trigonometric functions to each circle’s index and the elapsed time, with a logarithmic amplitude modulation creating organic, pulsing trajectories. The visualization uses D3.js to select and update SVG circle elements, setting their positions via computed transforms. The color of each circle is derived from its index using the HSL color space, producing a smooth rainbow gradient across the swarm.

Aandybak
79% match
Loading thumbnail…

Hot Circles

Twelve colorful circles pulse outward from their stored coordinates, each expanding to a uniform radius against a black background. Using D3's data join with enter, update, and exit selections, the visualization animates circle growth with slow transitions while rapid updates reposition elements. The circles use `mix-blend-mode: screen` in CSS to blend overlapping colors, rendering CSV-derived data through D3's `select` and `transition` APIs.

CCurran Kelleher
79% match
Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

AAndre J Denais
79% match