Gooey effect

100%

Gooey effect - Rotating circles - Blending colors

✓ Published0🌍 Public

Last edited Jul 2, 2017

Created on Jun 4, 2017

Three groups of colored circles rotate around a central point, merging and blending their colors through a gooey effect. The circles travel in circular paths at different speeds while a Gaussian blur filter and a color matrix transform create the blended, liquid-like appearance. Built with D3.js version 3.5.6, the animation uses chained `transition.attrTween` calls with the `rotate` interpolator to continuously rotate each circle. The SVG filter applies `feGaussianBlur` and `feColorMatrix` to the group element, omitting the final sharp-shape overlay to keep colors blended.

AI-generated description

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f'>Gooey effect - Rotating circles - Blending colors</a>

Original readme below:

This example appears on my blog on More fun data visualizations with the gooey effect

The SVG Gooey effect that is create by applying an SVG filter to a group element in which the circles are created. In this version the colors blend together nicely because I've left out one step in the SVG filter that places the original sharp SVG shape back on top the blurred one.

Although the blending of colors looks nice, smaller shapes might appear even smaller than they really are, due to the blurring and not placing the original shape back on top.

To see the same visual, but with the last step added to the filter so you have your exact shapes back, please check out my other bl.ock: Gooey effect Rotating circles Non-blending colors

You can find the other examples from the blog here

Older examples with the Gooey effect

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f'>Gooey effect - Rotating circles - Blending colors</a>

Similar vizzes

Loading thumbnail…

The visualization demonstrates a "gooey effect," where multiple circles emerge from a central stationary circle and then fall back into it, creating a fluid, blob-like appearance during their transition. The effect is achieved using an SVG filter with `feGaussianBlur`, `feColorMatrix`, and `feComposite` applied to a container group. D3.js v3 handles the rendering and animation, using a force layout (`d3.layout.force`) to manage the movement of the circles, while their positions are updated on each tick. The data consists of a single object with random velocity values, and all circles are initially placed at the center.

SSpaceActuary

86% match

Loading thumbnail…

Gooey Effect

A grid of small purple circles repeatedly morphs into a larger circle and back, creating a liquid-like "gooey" effect. The code uses an SVG filter with `feGaussianBlur` and `feColorMatrix` to blend overlapping shapes, while `d3.forceSimulation` computes cluster positions. Transitions apply `transition.attrTween` to interpolate filter values and stagger circle movement based on distance from the center.

AAjayyy

86% match

Loading thumbnail…

Gooey Effect

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.

FFrissAnalytics

85% match

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

82% match

Loading thumbnail…

Gooey egde effect

A hexagon filled with colorful moving circles demonstrates a gooey edge-detection effect. The visualization applies an SVG filter using feGaussianBlur and feColorMatrix to create the gooey merging, then adds feConvolveMatrix to extract the edges of the merged shapes. A linear gradient fills the hexagon, which is defined as a clip path. The circles are positioned with random coordinates and animated via D3.js v4, with the filter defined in SVG defs and applied to the transformed circle group.

TThanaporn-sk

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

82% match

Loading thumbnail…

rotating the circles

Three colored circles continuously rotate through a sequence of colors, shifting left and right in two separate animated containers. One container shows a set of three overlapping circles, while the other displays a single circle that cycles through green, blue, and orange. Using D3 v4’s data joins and transitions, each circle’s size, position, and z-index animate over 400 milliseconds, with the enter and exit selections resizing elements to create a smooth, circular rotation effect.

PPatrick Wojda

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