∞ forever components

SVG Animations

Gooey Merge

7 buttery-gold blobs orbit a shared center under an SVG goo filter, continuously merging and splitting as a global breathing pulse drives their spread.

svgmedium complexitymoderate motionmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Dark-mode hero backgrounds, loading screens, or ambient decorative panels needing organic liquid motion.

When not to

Light backgrounds (hardcoded dark body), or contexts where constant motion competes with legible content.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the blob color to teal by replacing stop-color values in #ssa03-grad with #5cf0d0/#00bfa5/#007a6e and update .ssa03-c fill to #00bfa5. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • blob radii (r values in blobs array)
  • orbit amplitudes (ax/ay per blob)
  • orbit speeds (sp values)
  • goo filter threshold (feColorMatrix value 26)
  • global pulse speed (t*0.42)
  • gradient stop colors
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • SVG goo filter (feGaussianBlur + feColorMatrix)
  • IIFE wrapper
  • prefers-reduced-motion guard + staticFrame fallback
  • visibilitychange pause/resume
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • feBlend final step can cause color fringing on some WebKit versions

svgmetaballgooeyfilterorbitliquidambient

More SVG Animations components

  • Turbulent BannerSerif gradient "TURBULENT" ripples under animated feTurbulence heat-haze; baseFrequency and displacement scale breathe via coupled sines, dark vignette…
  • Icon MorphA peach gradient media icon morphs between play, pause, and stop states via point-interpolated Catmull-Rom curves, slowly spinning inside a glowing ring.
  • Dash FlowOrthogonal circuit traces with powder-blue light pulses travelling via stroke-dashoffset; junction pads flicker as current passes. Dark navy background.
  • Gradient SweepA faceted hex-prism wireframe raked by a rotating spectral gradient band; the lit slice shifts hue continuously via rAF while SMIL drives the sweep rotation.
  • Orbit SpinnerThree nested blush-gradient arcs counter-rotate at varied speeds with a glow filter; a racing bright dash and pulsing core complete the orbital loader.