Bauhaus Geometric

Orbiting Arcs

Concentric red, blue, and yellow arcs counter-rotate around a breathing core; scattered dots and a tilted segmented bar orbit in abstract Bauhaus style.

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 portfolio heroes, Bauhaus or geometric-themed UI, ambient gallery backdrops needing primary-color motion.

When not to

Contexts requiring text legibility over the center — the orbiting elements fill the canvas. Light-background layouts (background hardcoded dark).

Working with an AI agent

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

Change the core fill to yellow (#f4c20d), slow the arc rotation to 40s (change bh02-spin duration from 26s to 40s), and increase the blue arc stroke-width from 22 to 30. 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 speed (26s on #bh02-arcs)
dot ring reverse speed (17s on #bh02-dots)
bar easing speed (11s on #bh02-bar)
stroke widths on arc paths
primary palette colors (#e63329, #1f5fd1, #f4c20d)
core beat scale (1.14 at 50%)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

bh02-paused class pause mechanism
visibilitychange listener
prefers-reduced-motion guard that freezes to static frame
IIFE wrapper
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

All animations are CSS-only with fixed viewBox 400x400 — arc geometry does not adapt to viewport aspect ratio
Bar animation uses cubic-bezier with non-uniform rotation steps; changing duration alters the motion feel significantly

bauhausgeometricorbitconcentricsvgabstract-geometryrotationprimary-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.
Form TrioRed circle, blue square, and yellow triangle orbit a slow-rotating armature while each shape independently spins, pulses, or tilts on a dark field.
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.