Dots
Dots drift
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Motion is intentionally slow (multi-second to minute-scale loops): look for gentle drift and soft opacity pulses, not fast spins. If nothing moves, check system “reduce motion” and use Play animations below.
Local preview: run python3 generator/build-showcase.py then serve the showcase/ folder as the site root (e.g. cd showcase && python3 -m http.server 8080) so svg-backgrounds.html and assets/ resolve. View source and search for <svg inside .ks-ambient-bg to confirm this build inlined the patterns. DevTools: use ?ksDebugBg=1 before any # hash (e.g. svg-backgrounds.html?ksDebugBg=1#asset-fourier-forge-spectral-animated-01), not after the hash.
Overview
Fourier FORGE backdrops
Spectral harmonic stacks masked into the word FORGE live in Sinusoids — static and animated (SMIL). In the showcase sidebar: Patterns → SVG ambient backgrounds (this page is svg-backgrounds.html).
Optional ambient layers for the Forge design system. Use the wrapper pattern:
<section class="ks-has-ambient-bg ks-bg-overlay--soft">
<div class="ks-ambient-bg ks-bg--dots-drift-01" data-ks-bg-src="assets/svg/backgrounds/dots/bg-dots-drift-01.svg" aria-hidden="true"></div>
<div class="ks-ambient-bg-overlay" aria-hidden="true"></div>
<div class="ks-content">…</div>
</section>This gallery inlines each SVG at build time so previews work on any static host. Elsewhere, use data-ks-bg-src with KsAmbientBg.init() as needed. Full catalog: docs/svg-background-catalog.md.
Dots
Dots
Dots cluster
Best for: Card · Glass — Soft clusters; glass panels.
.ks-bg--dots-cluster-01 · backgrounds/dots/bg-dots-cluster-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Dots
Dots field
Best for: Section · Wide — Irregular sparse field.
.ks-bg--dots-field-01 · backgrounds/dots/bg-dots-field-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Dots
Dots pulse
Best for: Card · Compact — Gentle opacity breathing.
.ks-bg--dots-pulse-01 · backgrounds/dots/bg-dots-pulse-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Neurons
Neurons
Neurons softmesh
Best for: Hero · Wide — Delicate mesh; hero and headers.
.ks-bg--neurons-softmesh-01 · backgrounds/neurons/bg-neurons-softmesh-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Neurons
Neurons pulsegraph
Best for: Section · Flow — Slow edge pulse along links.
.ks-bg--neurons-pulsegraph-01 · backgrounds/neurons/bg-neurons-pulsegraph-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Neurons
Neurons synapse
Best for: Glass · Card — Sparse asymmetric graph.
.ks-bg--neurons-synapse-01 · backgrounds/neurons/bg-neurons-synapse-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Neurons
Neurons cluster
Best for: Card — Tight node group; small crops.
.ks-bg--neurons-cluster-01 · backgrounds/neurons/bg-neurons-cluster-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Sinusoids
Sinusoids
Sine layered
Best for: Section · Typography — Layered waves; headings.
.ks-bg--sine-layered-01 · backgrounds/sinusoids/bg-sine-layered-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Sinusoids
Sine ribbon
Best for: Wide · Section — Single soft ribbon drift.
.ks-bg--sine-ribbon-01 · backgrounds/sinusoids/bg-sine-ribbon-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Sinusoids
Sine interference
Best for: Code · Diagram — Two-phase interference; calm.
.ks-bg--sine-interference-01 · backgrounds/sinusoids/bg-sine-interference-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Sinusoids
Fourier FORGE spectral
Best for: Hero · Brand — Harmonic sums (Fourier) masked into FORGE; detuned backdrop.
.ks-bg--fourier-forge-spectral-01 · backgrounds/sinusoids/bg-fourier-forge-spectral-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Sinusoids
Fourier FORGE spectral (animated)
Best for: Hero · Brand — Same motif; staggered SMIL drift + slow vertical breathe.
.ks-bg--fourier-forge-spectral-animated-01 · backgrounds/sinusoids/bg-fourier-forge-spectral-animated-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Sinusoids
Signal trace
Best for: Table · Code — Trace line with slow sweep.
.ks-bg--signal-trace-01 · backgrounds/signals/bg-signal-trace-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Stars
Stars
Stars parallax
Best for: Hero · Footer — Layered depth drift.
.ks-bg--stars-parallax-01 · backgrounds/stars/bg-stars-parallax-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Stars
Stars drift
Best for: Section — Field drift; transition bands.
.ks-bg--stars-drift-01 · backgrounds/stars/bg-stars-drift-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Stars
Stars sparse
Best for: Modal · Card — Very sparse; previews.
.ks-bg--stars-sparse-01 · backgrounds/stars/bg-stars-sparse-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Grids
Grids
Grid pulse
Best for: Table · Data — Soft grid activation pulse.
.ks-bg--grid-pulse-01 · backgrounds/grids/bg-grid-pulse-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Grids
Grid shift
Best for: Code · Table — Slow phase shift grid.
.ks-bg--grid-shift-01 · backgrounds/grids/bg-grid-shift-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Grids
Lattice flow
Best for: Navigation · Cards — Diagonal lattice signal.
.ks-bg--lattice-flow-01 · backgrounds/grids/bg-lattice-flow-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Grids
Hex drift
Best for: Section — Sparse hex mesh drift.
.ks-bg--hex-drift-01 · backgrounds/grids/bg-hex-drift-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Contours
Contours
Contour flow
Best for: Hero · Narrative — Contour lines; editorial tech.
.ks-bg--contour-flow-01 · backgrounds/contours/bg-contour-flow-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Contours
Contour depth
Best for: Gallery · Wide — Layered contour depth.
.ks-bg--contour-depth-01 · backgrounds/contours/bg-contour-depth-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Contours
Topology soft
Best for: Hero · Section — Soft abstract terrain.
.ks-bg--topology-soft-01 · backgrounds/contours/bg-topology-soft-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Accents
Accents
Orbit minimal
Best for: Compact · Badge — Minimal ring; small UI.
.ks-bg--orbit-minimal-01 · backgrounds/orbits/bg-orbit-minimal-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Accents
Orbit node
Best for: Card · Stat — Node + arc; tiles.
.ks-bg--orbit-node-01 · backgrounds/orbits/bg-orbit-node-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Accents
Signal beacon
Best for: Compact · Callout — Soft radial beacon pulse.
.ks-bg--signal-beacon-01 · backgrounds/orbits/bg-signal-beacon-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK
Accents
Pulse ring
Best for: Button · Badge — Expanding ring; not a spinner.
.ks-bg--pulse-ring-01 · backgrounds/orbits/bg-pulse-ring-01.svg
Hero crop
Ambient hero
Secondary line under heading.
Secondary line under heading.
Section
Body copy band — readable with overlay tuning.
Glass card
Panel
Glass over motion.
Glass over motion.
Compact
OK