Blobbing Particles

100%

Blobbing Particles

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Jul 28, 2016

Two layers of colored particles drift and bounce across a toroidal plane, each layer rendered as semi-transparent cells whose shapes merge and separate. The cells are computed with the `distanceLimitedVoronoi` plugin, and each cell’s fill uses a radial gradient, causing a flickering effect as the cell’s bounding box changes size. The animation runs via `d3.timer`, with particle positions updated by random acceleration and damping, and SVG paths are redrawn each frame.

AI-generated description

This block is a recreation:

apply radial gradient to distanceLimitedVornoy cells
use 2 layers: cells of the same layer are blobbing/merging thanks to distanceLimitedVornoy technique; cells of distinct layers are overlapping

I guess the strange flickering effect comes from the definition of a radial gradient: it's center and width of the radial gradient are defined as a percentage. These percentages are computed among the BBox of the element on which the radial gradient is applied on. Because a cell's widht/height is constantly evolving (depending on neighbours proximity), the radial gradient's center/widht is also constantly evolving/shrinking.

See this block for a smoother version.

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v3.4)
<a href='http://blockbuilder.org'>blockbuilder.org</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Blobbing Particles IV

Three layers of colored particles—green, blue, and red—drift smoothly across the canvas, merging into blobby clusters within each layer while remaining visually distinct across layers. Each particle is a radial-gradient circle clipped to a distance-limited Voronoi cell, so nearby particles appear to fuse together. The animation uses d3.distanceLimitedVoronoi to compute cell boundaries, SimplexNoise to drive continuous movement, and D3 transitions to update positions and opacity in real time, creating a fluid, organic swarm effect.

KKcnarf

90% match

Loading thumbnail…

Blobbing Particles II

Two layers of independently moving particles drift and collide on a dark field, their soft radial-gradient discs merging into blobs within each layer while layers remain distinct. The visualization uses D3.js v4 with a custom `distanceLimitedVoronoi` API to compute clipping paths for each particle, constraining its drawn circle to its Voronoi cell. Particles’ velocities are updated via a simple random walk with damping, and rendering is entirely SVG, with each circle clipped by its cell’s path and a radial gradient applied for a soft edge.

KKcnarf

90% match

Loading thumbnail…

Blobbing Particles III

Two semi-transparent layers of particle clusters merge and separate continuously on a dark SVG canvas. Closer particles appear brighter and more pronounced, while distant ones fade to a baseline opacity. The animation uses D3 v4 for SVG rendering, simplex-noise.js for smooth wandering motion, and a distance-limited Voronoi technique to clip radial-gradient circles, creating the organic blobbing effect.

KKcnarf

87% match

Loading thumbnail…

Blobbing Worms

Three layers of green, blue, and red worm-like particles wander across the screen, each layer merging into blobs through clipped radial-gradient circles. Closer particles appear brighter, with opacity increasing as they approach. The animation uses SimplexNoise for smooth, organic movement, while D3.js’s `distanceLimitedVoronoi` technique clips each circle to its Voronoi cell, creating the merging effect. Each layer is rendered as an SVG group, and d3.timer drives the animation loop.

KKcnarf

83% match

Loading thumbnail…

Voroblobinoids

A field of one hundred particle points performs a random walk with velocity damping and elastic collisions against the canvas edges. Each frame, the D3 Voronoi tessellation of these points is computed using `d3_voronoi.voronoi`, and the resulting convex cells are drawn with rounded corners via a custom `drawRoundedPolygon` function. Canvas rendering strokes the cell boundaries in white and light gray, while the particles themselves appear as small black dots. The animation loop uses `d3_timer.timer` to drive the real-time updates.

Mmbostock

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

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

PPhilippe Rivière

75% match

Loading thumbnail…

Voronoi Spirals

Randomly placed points generate Voronoi cells that gradually spiral inward, cycling through a Cubehelix color scale over a five-second animation. The d3-voronoi layout computes the initial polygons, then each frame the code shifts a vertex and interpolates a new point along each cell’s first edge, closing the path and filling it with a color based on elapsed time. Rendered on a Canvas via the d3.timer API, this creates a continuous, organic morphing effect.

Mmbostock

73% match