OMG Particles SB

100%

OMG Particles SB

✓ Published0🌍 Public

Last edited Nov 26, 2021

Created on Nov 26, 2021

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.

AI-generated description

Messing around with Mike Bostock's OMG Particles 2, source: https://bl.ocks.org/mbostock/9539958

MIT Licensed

Similar vizzes

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

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

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

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

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

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

73% match

Loading thumbnail…

Connected Particles III

This example renders 200 particles as small circles on an HTML5 Canvas, with each particle moving via a random walk that includes velocity damping. Lines connect pairs of particles whenever their distance is less than 60 pixels, with line opacity varying based on proximity, turning fully opaque below 40 pixels. The simulation uses a custom timer based on `requestAnimationFrame`, and the drawing relies on Canvas methods like `beginPath`, `arc`, `moveTo`, and `lineTo`. Both particle positions and connection lines are updated each frame, creating a dynamic web of interactions.

Mmbostock

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

73% match