Skip to main content
100%

Circles10

✓ Published0🌍 Public
Aandybak
Last edited Mar 7, 2014
Created on Mar 7, 2014

A generative animation renders 1,197 colored circles on a dark background, arranged in a rotating, pulsing spiral pattern. Each circle’s position is calculated per frame using trigonometric functions that combine a time-based tangent amplitude with a rotational offset, producing a fluid, organic motion. The visualization is built with D3.js, using selections and attribute transforms to update circle positions, while color is assigned via the HSL color space. The code runs in Tributary, with a duration of 5.3 seconds and adjustable speed and alien-factor parameters controlling the motion’s complexity.

AI-generated description

Similar vizzes

Loading thumbnail…

Circles07

A dark, animated field of 1,197 colored circles swirls around the center of the screen. The circles, rendered as an SVG group, continuously move in a complex, rotating pattern, with their hue cycling through the full color spectrum based on their index. Using D3.js, the animation calculates each circle’s position through trigonometric functions that vary with time and a per-circle offset, producing a dense, hypnotic, flower-like motion. The code directly sets element attributes and uses a custom update loop via `tributary.run`, with opacity and radius controlled for a layered, glowing effect.

Aandybak
89% match
Loading thumbnail…

Circles09

Circles09 displays a field of 1,197 translucent, colorful circles on a dark background, each colored by hue according to its index. The circles are arranged in a rotating, pulsing pattern that intensifies over time. The animation is built with d3.select, d3.range, and SVG circle elements, positioned via trigonometric functions (Math.cos, Math.sin, Math.tan) within a transform. The code uses a tributary.init and tributary.run loop to update the circles' positions, with constants like alien_factor and alien_factor2 controlling the spatial distortion and rotation speed.

Aandybak
88% match
Loading thumbnail…

Circles05

A swirling field of hundreds of semi-transparent, hue-rotating circles expands and contracts in a dark void. The circles trace logarithmic spiral paths as they drift outward from the center, their radii growing over time. The piece uses D3.js to bind data to SVG circle elements, updating their positions and sizes each animation frame via a custom trigonometric transform. It runs in the Tributary environment with a 5.3-second looping duration.

Aandybak
88% 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
87% match
Loading thumbnail…

Circles08

Circles08 generates a dense, dark field of 1,197 colored circles that swirl outward from the center of the SVG canvas. The animation, driven by a D3.js update loop with trigonometric functions, transforms each circle’s position using a tangent-based amplitude and rotation offsets. The circles, rendered as SVG elements with varying HSL hues, shrink to a radius of 15 pixels while moving in a hypnotic, alien-like pattern. The code uses D3 selections and attribute tweens to apply the motion, with a black background and semi-transparent fill for a layered effect.

Aandybak
86% match
Loading thumbnail…

Circles06

A dark field of 1,197 colored circles continuously expands and contracts in a swirling, wave-like motion. The circles, each with a distinct hue from the HSL color space, orbit around a central point, their radii growing and shrinking over time. Built with D3.js, the animation uses a custom `tributary.run` loop to calculate each circle’s position via trigonometric functions, while the fill color is assigned per data index. The background is set to a dark RGB value for contrast.

Aandybak
86% match
Loading thumbnail…

Circles02

Seven hundred semi-transparent circles, colored by hue, orbit and pulse on a dark background. The animation derives each circle’s radial distance from a logarithmic function of its angular position and time, producing complex, layered motion. The code uses D3 selections and attribute tweening to update `transform` positions, with color assigned via `d3.hsl` and a custom `get_points` helper.

Aandybak
85% match
Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita
79% match