Oh my gosh

100%

✓ Published0🌍 Public

Last edited Jan 24, 2018

Created on Jan 23, 2018

This example shows an interactive particle trail that follows the mouse, leaving a fading, expanding ring and a connecting line on a black background. As the pointer moves, the code appends circles that grow, shrink, and change color, while a monotone line links the latest two points. It uses D3 v4 with SVG elements, `d3.mouse` for coordinates, `d3.interpolateSpectral` for hue cycling, and chained `transition` calls with easing to animate each particle. The trail auto-removes old marks after delays, and the color continuously shifts between spectral extremes.

AI-generated description

I took the <a href="https://bl.ocks.org/mbostock/9539958">OMG Particles II</a> from <a href="https://bl.ocks.org/mbostock>Mike Bostock</a> and recreated it myself with some extra things added in.

Similar vizzes

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

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

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

78% match

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

78% match

Loading thumbnail…

Moving Circles

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.

MManinder Singh

77% match

Loading thumbnail…

Mouse Follower with Colorful Circles

A mouse follower creates an expanding circle at the cursor position, with each circle fading out and disappearing after 2 seconds. The circles use the `d3.schemePaired` color scale to generate varied stroke colors. Built with React and D3 v5, the app tracks mouse movement via React’s `onMouseMove` event and appends SVG circles using `d3.select` with a `transition()` duration of 2000ms that animates the radius and stroke opacity.

Rrioto9858

76% match

Loading thumbnail…

Circle Trail

A white circle follows the mouse cursor across a purple background, leaving a trail of its previous positions. The visualization uses d3-selection’s `select` and `selectAll` with a `.join()` pattern to append or update a single circle element on each `mousemove` event. The circle’s coordinates are stored in a state object and updated via a `setState` callback, while `window.innerWidth` and `window.innerHeight` set the SVG size. This demonstrates a simple, event-driven rendering loop with D3 v7.

Jjjlaber

75% match

Loading thumbnail…

Trail

A circle follows the mouse across a full-window SVG. The visualization uses D3 v7’s `select` to append an SVG and a single circle, then listens to `mousemove` events on the SVG to update the circle’s `cx` and `cy` attributes. The page is styled with CSS to remove margins and hide scrollbars. No data source is involved; the piece demonstrates direct mouse-driven DOM attribute updates with D3’s event handling.

Jjjlaber

75% match