Gooey Effect

100%

✓ Published0🌍 Public

Last edited Oct 5, 2018

Created on Oct 5, 2018

Sixty purple circles animate between a regular grid and a clustered circle, creating a smooth gooey merging effect. The transition is driven by an SVG filter using `feGaussianBlur` and `feColorMatrix`, with the blur values tweened via `transition.attrTween`. D3 v4’s `d3.forceSimulation` handles the clustering physics, while staggered `transition` delays on circle positions emphasize the organic flow. The effect alternates between the two states on a loop.

AI-generated description

Experimenting with the gooey effect - based on the work of Nadieh Bremer.

This is an attempt at an icon grid to circle transition.

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/af94702a0b13ff7d0a491d5cbc1338f2'>Gooey Effect</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Gooey egde effect

Shifting circles confined within a hexagon produce a bold, gooey edge effect as they move and merge. The visualization applies an SVG filter chain—including `feGaussianBlur`, `feColorMatrix`, and `feConvolveMatrix`—to blur, threshold, and detect edges from the animated shapes. Built with D3 v4 and SVG, it uses a linear gradient fill and a clip path to constrain the motion, offering a dynamic exploration of filter-based visual styling.

KKcnarf

83% match

Loading thumbnail…

SVG inline only Gooey Effect

The example demonstrates a gooey effect in SVG, where multiple pairs of circles merge and separate with a smooth, organic visual transition. A clickable button triggers transformations that animate the circles’ positions, while paired goop paths dynamically generate stretched, fluid-like connections based on the distances and radii of each circle pair. Built with D3 v4, the visualization uses custom functions `goopGen` and `goopTransform` to compute path geometries, along with SVG attributes and D3’s data-binding capabilities to render the interactive animation. The code defines three circle pairs with specified coordinates and keys, all rendered in a 100x100 viewBox.

IIsaKiko

81% match

Loading thumbnail…

Colour-full force

Twenty-eight colored circles drift across a black SVG canvas in a soft, gooey cluster. Each circle is assigned a rainbow hue and a random radius, with alternating circles receiving a blurred filter effect that makes them blend together. The motion is driven by D3’s `forceSimulation` with charge, center, and collision forces, while the rendering uses SVG circles and a `feGaussianBlur` with a `feColorMatrix` filter to create the liquid-like appearance.

AAlireza-Dezfoolian

78% match

Loading thumbnail…

Split circles animation

Three red dots transition into a field of one hundred smaller dots that collide and scatter before a subset is ejected off-screen, then the animation reverses. The cycle repeats continuously. Built with D3 v5 and SVG, the visualization uses the `d3.forceSimulation` API with a `collision` force to disperse the particles, and a custom `d3.transition` to animate the circles between keyframe states with easing and enter/exit transitions. The blue center point remains static, marking the origin for each merge and split.

PPatrick Wojda

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…

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

74% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

74% match

Loading thumbnail…

Chained Transitions

Fifty black circles, each representing one step in a 50-point scale, are arranged along the left edge of an SVG. Chained transitions, created using `transition.transition` and `d3.active`, repeatedly sweep each circle horizontally across the frame and back, with staggered delays creating a cascading wave effect. The circles’ fill colors interpolate between light yellow and dark blue via a linear scale with `d3.interpolateHcl`. The animation runs concurrently on all elements, inheriting the original transition’s reference time to ensure synchronized looping.

Mmbostock

74% match