Monoids

100%

✓ Published0🌍 Public

Last edited Jul 11, 2017

Created on Jun 8, 2017

Five circles labeled “1” sit in a row on a gooey SVG filter background. Through a repeating chain of `transition` calls, the circles shift rightward one by one, merging into a single blob, fading out, then reappearing in a new arrangement before the animation restarts. The code uses D3 v4 selections, `transition.attr` with custom transform functions, and an SVG `<filter>` with `feGaussianBlur`, `feColorMatrix`, and `feComposite` to create the liquid effect. The data is a static array of five integer objects, and the animation loops indefinitely via a callback on the final transition’s `end` event.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

77% match

Loading thumbnail…

Gooey effect - Rotating circles - Blending colors

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.

AAlan McConchie

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

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

75% match

Loading thumbnail…

Fork of Circles with D3

Seven colored circles, each 15 pixels in radius, rest in a horizontal line at the bottom left of a mint-green canvas. Hovering over any circle smoothly animates it into an evenly spaced orbit around the screen’s center, using an ease transition over one second; hovering again returns it to its original spot. The example demonstrates D3 v7’s `select().join()` for SVG element creation and stable keyed data binding, alongside `on('mouseenter')` event handling and the `transition().attr()` API for position tweening. All seven circles—red through violet—exist in a fixed dataset.

BBen Trantanella

75% match

Loading thumbnail…

Circles

Five blue circles appear in a row, drawn as SVG elements. Clicking the button triggers a `mouseleave` event on all of them, causing each to turn red and then fade back to blue over one second. Built with React, it uses D3 v5’s selection and transition API to animate the fill attribute.

Jjijou31

75% match

Loading thumbnail…

Chained Transitions II

Fifty black circles in a vertical column slide horizontally across the canvas, one after another, creating a cascading wave of motion. Each circle’s fill shifts from pale yellow to deep navy based on its position, using a linear scale with HCL interpolation. The animation uses D3 v4’s `d3.active` to chain transitions, with each circle’s start event triggering a sequence of left-to-right and right-to-left movements via `transition.attr` and `on("start", slide)`. The SVG rendering relies on a point scale for vertical placement and a delayed transition per circle.

AAlan McConchie

75% match

Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Jjesramyep1263

75% match