Skip to main content
SimilarExport ZIP
100%

Gooey egde effect

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jul 29, 2017
Created on Jul 29, 2017

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.

AI-generated description

OK, this is not an secret: this block is based on the work done by nbremer on the gooey effect (cf. the original block, and More fun data visualizations with the gooey effect).

In this block, the resulting image is produced by applying a filter on moving circles. The filter is the same as the one used to produce the gooey effect, except that it uses an extra step which detects edges (feConvolveMatrix).

Acknowledgments to:

forked from <a href='http://bl.ocks.org/Kcnarf/'>Kcnarf</a>'s block: <a href='http://bl.ocks.org/Kcnarf/3f1740338371011b2ba78ffbc712ea07'>Gooey egde 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
95% 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
85% 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
84% 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
84% 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
79% 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
79% match
Loading thumbnail…

Color blending - Hexagon

Overlapping circles of varying colors and sizes drift within a hexagonal boundary, blending via the `mix-blend-mode` of `screen` to create luminous color transitions as they intersect. Animated with D3 v4’s `transition` system and random durations, each circle follows a random walk, while a clipped SVG group confines the motion. The piece uses a dark background and nine distinct hues to showcase additive blending effects.

AAjayyy
75% match
Loading thumbnail…

Hexagonal SVG gradient experiment

A grid of hexagons fills the page, each one displaying a linear gradient oriented along one of three angles, with colors randomly drawn from a dark rainbow palette. The animation progressively reveals hexagons starting from the center, growing outward in a wave-like pattern. Built with D3 v5 and SVG, the code constructs hexagon paths using trigonometric calculations and applies randomized gradient definitions through the SVG `defs` element.

AAjayyy
74% match