∞ forever components

SVG Animations

Dash Flow

Orthogonal circuit traces with powder-blue light pulses travelling via stroke-dashoffset; junction pads flicker as current passes. Dark navy background.

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

Tech/hardware hero backgrounds, data-flow visualizations, dark-mode dashboards needing ambient network motion.

When not to

Light backgrounds (hardcoded dark navy). Contexts where constant motion competes with text readability.

Working with an AI agent

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

Change pulse color from powder-blue to cyan (#00ffcc) by updating stroke in .ssa06-pulse and slow speed range from R(38,72) to R(20,45). 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

  • pulse color (#B0D4DD in .ssa06-pulse stroke)
  • pulse speed range (R(38,72) px/sec)
  • segment length ratio (len*0.22)
  • grid column/row arrays (cols/rows)
  • node density threshold (0.42)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion static fallback
  • visibilitychange stop/start handlers
  • SVG glow filter (feGaussianBlur + feMerge)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Layout is randomly generated each load — no two renders are identical
  • Background color hardcoded — must edit CSS body rule for non-dark surfaces

circuitsvgdashpulseflowgenerativedark-mode

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.
  • 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.