Bauhaus Geometric

Form Trio

Red circle, blue square, and yellow triangle orbit a slow-rotating armature while each shape independently spins, pulses, or tilts on a dark field.

svglight 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

Art/design portfolios, Bauhaus or geometric-themed hero sections, ambient background loops needing primary-color energy.

When not to

Contexts requiring legible text overlays — the rotating armature competes visually. Avoid where reduced-motion users need meaningful content.

Working with an AI agent

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

Change the outer armature rotation from 28s to 14s by editing `animation:bh03-spin 28s linear infinite` on `#bh03-rot`, and swap `--bh03-bg` to `#f5f0e8` for a light paper background. 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

armature rotation speed (28s on #bh03-rot)
shape fill colors (--bh03-red, --bh03-blue, --bh03-yellow CSS vars)
triangle step count (steps(8,end) on #bh03-tri)
beam tilt range (rotate(-9deg)/rotate(9deg) in bh03-tilt)
circle pulse scale (1.12 in bh03-pulse)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

static bh03-shadows layer (never animate — cheap composite)
IIFE wrapper with visibilitychange pause
prefers-reduced-motion guard (animation:none block + JS setState paused)
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Static shadow layer is baked at rest positions — shadows detach visually as shapes move far from origin
No click/hover interactivity; purely decorative

bauhausgeometricsvgloopambientcompositionprimary-colors

More Bauhaus Geometric components

Grid Construction16 primary-colored geometric shapes scatter then snap into a 4x4 modular grid, hold, dissolve, and recompose in a new Bauhaus arrangement.
Orbiting ArcsConcentric red, blue, and yellow arcs counter-rotate around a breathing core; scattered dots and a tilted segmented bar orbit in abstract Bauhaus style.
Mobile BalanceA Calder-style kinetic mobile of Bauhaus primary-colored circles, squares, and triangles hang from swaying black balance arms in slow counterpoint.
Dot Rhythm8x8 grid of red, blue, yellow, and white dots pulsing in diagonal travelling waves; two interfering sines modulate scale and opacity for a rhythmic beat.
Diagonal CounterpointRed and blue diagonal bars sweep in opposing directions and cross at center; a pulsing yellow square node and slow-spinning dashed ring anchor the…
Nested Frames14 concentric Bauhaus-palette rectangles zoom endlessly inward via seamless log-scale rebasing; a yellow square and red circle accent the core.