Skip to main content
SimilarExport ZIP
100%

Gooey Effect

✓ Published0🌍 Public
AAjayyy
Last edited Jun 17, 2019
Created on Jun 17, 2019

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.

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 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
94% match
Loading thumbnail…

Gooey Effect

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

Gooey scatterplot

This interactive scatterplot demonstrates the SVG gooey effect, where small nodes merge into larger cluster bubbles when grouped. The visualization presents 60 randomly generated data points across six clusters, with buttons toggling between grouped and ungrouped states. Using D3 v4, the code applies SVG filters including feGaussianBlur and feColorMatrix, with transition.attrTween animating the filter values to create the melting effect. Nodes transition to their cluster centers with staggered delays and exponential easing, while cluster circles fade in and out.

TThanaporn-sk
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
79% match
Loading thumbnail…

Rorschach effect and morphing using filter elements

An interactive button triggers a morphing Rorschach-like shape, with a red blob transitioning from a randomized scatter into a heart outline using d3.forceSimulation and an SVG filter that applies Gaussian blur and a color matrix for a gooey merging effect. The animation uses SVG circles bound to data points, animating their positions smoothly as the filter creates organic, fluid distortions. The code relies on d3.v4 for simulation and transitions, with the filter defined as an SVG `<filter>` element.

IIsaKiko
78% match