Moving Circles

100%

Moving Circles

✓ Published0🌍 Public

Last edited May 5, 2020

Created on May 5, 2020

Moving Circles is an interactive visualization that generates expanding ring particles that follow the cursor across a dark background. As the mouse moves, the code inserts new circle elements at the pointer position, each with a unique hue from an incrementing HSL color value. The circles then animate outward over two seconds using a square-root easing function, growing from a tiny radius to 100 pixels while fading their stroke opacity to zero before being removed. The example is built with D3 v3, using SVG transitions, mouse event handling, and d3.hsl for color generation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A cursor-driven animation creates expanding, fading circles in response to mouse movement. Each pointer position triggers a new circle that grows from a tiny point to a radius of 100 pixels over two seconds while its stroke opacity fades to zero, then removes itself from the SVG. The code uses d3.v3 with SVG transitions, appending circles with `transition().duration(2000).ease(Math.sqrt)` and styling each stroke with a rotating `d3.hsl` color. A transparent background rect captures mouse and touch events to drive the particle generation.

Ppoppy

81% match

Loading thumbnail…

OMG Particles II

A glowing circle travels smoothly toward the mouse cursor while continuously emitting expanding rings, each drawn as an arc with fading opacity against a dark background. The color of the rings cycles through the HSL spectrum. Built with D3 v3, the animation uses a `d3.timer` loop and `transition.tween` to interpolate ring radius over two seconds, while Canvas 2D rendering with `globalCompositeOperation` set to `lighter` creates additive blending. Mouse movement updates a target position, which is smoothed toward via exponential interpolation.

Mmbostock

81% match

Loading thumbnail…

expanding-circles

Expanding circles continuously appear across the screen, growing from tiny dots to large rings with random fill and stroke colors. The animation generates a new batch of circles every second, each positioned on a grid spanning the full viewport. The code uses D3’s selection, data join, and chained transitions with `transition.attr('r')` to animate radius, while leveraging `d3.shuffle` to randomize drawing order. The SVG rendering relies on D3’s `append` and `translate` helpers from the d3-starterkit, with colors generated by a custom `randColor` function.

11wheel

80% match

Loading thumbnail…

Moving circle

A moving circle follows the mouse cursor across an SVG canvas, changing to a random RGB color with each click. The visualization uses D3's data join pattern, binding arrays of null values to create and update a single circle and svg element on every state change. Mouse and click event listeners call a setState function that updates the circle's x and y coordinates to the cursor position or assigns a new randomly generated color.

SSubhendu Karmakar

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

Loading thumbnail…

OMG Particles!

A mouseover-driven particle burst fills the screen with expanding, fading rings. Each pointer movement inserts a new circle into the SVG, which grows over two seconds and fades away, creating a trail of colorful, overlapping ripples. The example uses D3.js v3, with a transition on the circle’s `r` and `stroke-opacity` attributes, and generates hues via `d3.hsl`. The background is a static SVG rectangle that captures pointer events.

Mmbostock

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…

OMG Particles SB

A looping animation of expanding, colored circles draws a glowing, shifting line that follows the mouse. The code uses D3.js v3 with a Canvas context set to "lighter" composite mode for additive blending. A timer triggers HSL color cycles and a `transition.tween` updates the arc radius over 10 seconds, while a mouse move event updates the target coordinates, creating a trailing, painterly effect.

SSebastian Barrett

79% match