Skip to main content
SimilarExport ZIP
100%

Gooey egde effect

✓ Published0🌍 Public
KKcnarf
Last edited Nov 16, 2016
Created on Oct 24, 2016

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.

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:

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

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

Motion blur - Diagonal movement & Multiple filters

Fifteen circles radiate outward from a central point, each moving diagonally with a one-directional Gaussian blur filter applied via SVG’s `feGaussianBlur`. Clicking toggles the blur on and off, switching the title between “With” and “Without motion blur filter.” The code builds multiple `<filter>` elements, one per circle, and rotates each circle’s group so the blur aligns with its movement angle. It uses D3.js (v3) for data binding, SVG transforms, and event handling, with filters manipulated via `style("filter", ...)`.

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

181202_04_ Nice hoevering effect

A grid of colored shapes on a large SVG canvas demonstrates a hovering effect, with white rectangles and concentric circles in steel blue, blue, dark blue, yellow, and light green arranged across vertical and horizontal green and red lines. The visualization divides the viewport into a parameterized grid using D3 v5's selection API, appending paths and circles via `append`, while styling lines through CSS classes. It uses `d3.zoom` to enable interactive panning and zooming, which updates the group's transform attribute based on the zoom event.

LLudovicGouverneur
73% match
Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel
72% match
Loading thumbnail…

blur-transition

Four wavy line charts fade in and out against alternating black and white backgrounds, with each transition blending the strokes into a cohesive, gooey mass before snapping back into crisp lines. The animation cycles repeatedly, morphing between the two color schemes while new random line data replaces the old. It uses D3.js to generate the SVG paths and axes, applying SVG filters—`feGaussianBlur` and `feColorMatrix`—to create the blur-and-chrome effect, with `transition` calls animating the filter attributes and background color changes.

11wheel
71% match