∞ forever components

SVG Animations

Orbit Spinner

Three nested blush-gradient arcs counter-rotate at varied speeds with a glow filter; a racing bright dash and pulsing core complete the orbital loader.

svgmedium complexitymoderate motion

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 →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Loading states, async operation indicators, dark-themed dashboards needing a polished animated spinner.

When not to

Light backgrounds (hardcoded dark navy body). Contexts where a minimal single-ring spinner suffices — this reads as decorative.

Working with an AI agent

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

Change accent to teal by replacing #E8B0B5 with #00c9a7 and #D8C197 with #0d9488 in all gradient stops, then slow the outer arc by changing dur="6.2s" to dur="9s". 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

  • arc rotation speeds (dur on each animateTransform)
  • gradient stop colors (#E8B0B5, #D8C197, #BCA9AB)
  • stroke widths (3.4 / 4 / 4.6)
  • glow blur radius (stdDeviation=2.4)
  • racing dash length (stroke-dasharray 14 476)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • SVG glow filter (feGaussianBlur + feMerge)
  • IIFE with pauseAnimations/unpauseAnimations visibility guard
  • prefers-reduced-motion settle() freeze via setCurrentTime + pauseAnimations
  • 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
  • SMIL animations may stutter on Chrome with heavy filter layers at certain viewport scales

loaderspinnerorbitsvgglowgradientcounter-rotate

More SVG Animations components

  • Stroke Draw-OnAn ochre constellation draws itself via stroke-dashoffset, with anchor nodes blooming in as the line passes; the glyph holds then fades and redraws in a loop.
  • Blob MorphA glowing blush gradient blob slowly morphs between 5 organic shapes via Catmull-Rom spline interpolation, with a slow CSS spin and radial halo glow.
  • Gooey Merge7 buttery-gold blobs orbit a shared center under an SVG goo filter, continuously merging and splitting as a global breathing pulse drives their spread.
  • 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.