Blueprint Technical
Mechanical Gear Schematic
Three interlocking gears rotate at matched ratios on a blueprint grid with scanning dimension lines and engineering annotation blocks.
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
Technical/engineering-themed hero sections, mechanical product showcases, retro industrial dashboards.
When not to
Contexts requiring high legibility text overlays — the rotating SVG elements compete with static content. Avoid on low-motion preference UIs without fallback content.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Change the blueprint color from cyan-blue (#7ec8e3) to amber (#f59e0b), slow gear A rotation to 8s, and update the title block text to 'TURBINE ASSEMBLY · DWG-007'. 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
- stroke color (--gs-stroke: #7ec8e3)
- gear rotation speeds (4s / 2s / 2.67s in CSS)
- scanline sweep duration (gs-scanh 2.8s)
- title block text (GEAR ASSEMBLY, DWG-002, REV B)
- background grid color (rgba(126,200,227,.05))
- theme tokens (:root dark defaults + [data-theme=light] overrides)
Keep intact
- transform-origin on each gear group (must match cx/cy of gear center)
- prefers-reduced-motion guard in IIFE
- visibilitychange pause handler
- IIFE wrapper
- theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
Known limitations
- Gear teeth are decorative lines at fixed angles — they do not mesh geometrically with neighboring gears
- Scanline sweeps only horizontally across gear A; does not track gear positions
- No touch or pointer interaction