OMG Particles II

100%

OMG Particles II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 14, 2014

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.

AI-generated description

A slightly updated version of OMG Particles! using Canvas and smooth interpolation towards the mouse location.

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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…

Connected Particles II

A field of 100 small particles drifts vertically on a dark canvas, with translucent gray circles drawn between any pair that comes within 100 pixels of each other. As particles move, their connecting arcs fade in and out based on proximity, creating a shifting network of temporary links. The animation runs via a custom d3-timer loop, using Canvas arc and fill operations per frame. Each particle’s horizontal position is fixed, while vertical velocity varies randomly, causing them to wrap around the edges.

Mmbostock

75% match

Loading thumbnail…

D3 Transitions

Six colored circles of varying sizes move across a light green canvas, growing from and shrinking to a radius of zero at different speeds. The visualization demonstrates the D3 transition API, using a slow two-second transition to animate the circles' entry and exit by scaling their radius, while a fast 500-millisecond linear ease animates position updates. The sketch initializes six data points with id, x, y, r, and fill attributes, then uses D3's `select`, `transition`, and `easeLinear` functions to orchestrate the dynamic reshaping of the circle group. A video embed links to a YouTube demonstration of the transition effects.

SShad Frigui

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

74% match