Skip to main content
SimilarExport ZIP
100%

OMG Particles!

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

Mouse movement over the SVG causes concentric, stroked circles to briefly expand and fade away, creating a particle-like trail. The color cycles through the HSL spectrum. The code appends circles using D3’s data join and transition methods with `ease(Math.sqrt)`, then removes them after 2 seconds. It uses D3 v3’s `d3.mouse` to track pointer coordinates and `d3.hsl` for color generation.

AI-generated description

Mouseover to make particles. Built with D3. I’ve written a slight newer version that creates particles continuously via d3.timer rather than on mouseover. So, check that out.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1062544'>OMG Particles!</a>

forked from <a href='http://bl.ocks.org/linnnes/'>linnnes</a>'s block: <a href='http://bl.ocks.org/linnnes/32bf55c76ec4f23b192a03bdbeb4e5f4'>OMG Particles!</a>

gpl-3.0 Licensed

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
90% 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
86% 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
84% match
Loading thumbnail…

OMG Particles II

A dark canvas displays a slowly expanding, fading circle that follows the mouse cursor with smooth interpolation. The visualization uses a repeating D3 timer to clear the canvas and draw a new arc stroke whose radius grows via a two-second tween with a square-root easing function. Built with D3 v3 and Canvas, it dynamically generates a new HSL color each frame and applies a global composite operation of “lighter” to create luminous, overlapping rings. Pointer movement updates the target coordinates, which are then interpolated toward at ten percent per frame.

AAjayyy
83% match
Loading thumbnail…

Oh my gosh

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.

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

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
75% match