Clockwork & Mechanical
Orrery
Four planetary arms orbit a glowing brass sun at staggered speeds; a counter-rotating dashed ring and crosshair armature give a steampunk orrery feel.
svglight complexitymoderate motion
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Dark-mode hero backgrounds, science/space themes, steampunk or mechanical UI aesthetics, ambient looping decorations.
When not to
Light backgrounds (hardcoded dark plate). Contexts where constant rotational motion competes with foreground content.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change the outermost planet speed to 18s by editing #or-ring1 animation duration, and recolor the sun gradient stops to deep red (#ff4400 → #880000). 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
- orbit arm speeds (animation durations 12s/8s/5s/3s/20s)
- planet fill colors (cx/cy circle fills)
- sun gradient stops (#ffe066, #e8a020, #a05010)
- ring track radii (r=72/56/40/25)
- counter-rotation direction (reverse keyword on or-ring5)
- theme tokens (:root dark defaults + [data-theme=light] overrides)
Keep intact
- IIFE wrapper with prefers-reduced-motion guard
- visibilitychange pause handler
- transform-origin:50% 50% on all rotating groups
- theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
Known limitations
- Background color hardcoded to #141414 — must edit CSS to change
- No interactivity; purely decorative
- SVG filter or-glow uses feComposite which may render differently across browsers