No client, no brief — a lab piece. A steel column-and-beam connection with a damper head, built as a single interactive SVG that assembles itself from its own exploded parts. This is the kind of thing we build when we're testing what a technical explainer can be on the web.
It auto-cycles between assembled and exploded on its own. Use the controls to hold a state, or hover a row in the parts list to trace that part through the model.
A steel corner column with two beams bolted to end plates on its faces, and a viscous damper unit at the column head — shown assembling from its exploded parts. Hover any item in the parts list to trace it in the model.
A second take on the same idea, this time as a procedure rather than an object: a cross-section through a wall, stepping through a seven-stage climb cycle. Press play, or step through by hand.
A generic climbing-formwork rig, in cross-section: external bracket and panel on one wall face, internal shaft platform on the other. Step through the cycle or press play — this is a composite of how these systems generally work, not any one manufacturer's product.
The lift has just been cast. Both formwork panels are closed and tied through the wall. The climbing bracket hangs on the cone in the lift below; the shaft platform bears on its gravity pawls.
| Top concrete pouring platform | 1.5 kN/m² |
| Secondary platform (on internal formwork) | 0.75 kN/m² |
| Main bracket platform | 3.0 kN/m² |
| Internal shaft platform | 3.0 kN/m² |
| External suspension platform | 0.75 kN/m² |
| Internal suspension platform | 0.75 kN/m² |
| Climbing cone, shear | 20 kN |
| Climbing cone, tension | 110 kN |
| Suspension cone (shaft beam head), shear | 20 kN |
| Gravity pawl, bearing | 30 kN |
| Minimum concrete strength when lifting | 10 N/mm² |
| Hanging points per platform unit | min. 2 |
| Formwork retraction gap | max. 750 mm |
Schematic only, values are indicative. The shaft platform actually spans between opposing walls and bears on a gravity pawl at each end; one wall is drawn here.
The whole scene is a flat SVG. Every part is a box drawn as three parallelograms on an isometric projection, sorted back-to-front once. No WebGL, no Three.js, no canvas — it renders the same on a five-year-old phone as on a workstation.
Each part knows two positions: seated, and pushed out along its own axis. Toggling a single boolean animates every piece between them with a CSS transition — so “explode”, “assemble” and the idle auto-cycle are all the same three lines of code.
Hovering a row in the bill of materials highlights every matching piece in the drawing — the column, both beams, every bolt. It reads like an engineering sheet, but you can poke at it.
Respects reduced-motion (renders exploded and still), follows light/dark, scopes all its styles so it can drop into any page, and ships with zero runtime dependencies beyond React.
A lot of what a business needs to explain — a product, a process, a piece of machinery — dies in a flat diagram or a stock render. Something you can take apart and put back together holds attention and gets remembered. These experiments are how we work out what's cheap to build, what performs on a phone, and what's actually worth the effort — before a client pays for it.
It is a lab piece — no client, no brief. Two interactive SVG technical diagrams built in-house to test what a technical explainer can be on the web. The first is an isometric steel column-to-beam connection with a viscous damper head that auto-cycles between assembled and exploded views, with a hoverable bill-of-materials panel (steel column, two beams, two end plates, twelve bolts, one damper unit; drawing number SC-DMP-004). The second is a generic climbing-formwork operating cycle shown as a cross-section stepping through seven stages, with play, pause and step-through controls.
Both are plain SVG with CSS transitions and a small amount of React state — no 3D engine, no WebGL, no canvas, no external runtime dependencies beyond React. The isometric scene is a flat SVG: every part is a box drawn as three parallelograms on an isometric projection, depth-sorted once, and moved between its seated and exploded position by toggling a single boolean. The formwork cycle shows and hides elements per step. Both follow light and dark mode, render still-and-exploded when prefers-reduced-motion is set, and the formwork stepper is keyboard-navigable.
Interactive SVG diagrams are useful anywhere a static image or PDF falls short: product documentation that needs to show assembly sequences, engineering specifications where parts need to be individually identified, construction procedures shown step by step, and technical marketing where you want to explain how something works without a video. They load instantly, stay sharp at any zoom level, can be made accessible to screen readers, and are indexable by search engines — unlike a WebGL canvas or an embedded video.
Yes. This experiment is a working example of the custom front-end work Codifyany builds for clients. If you have assembly sequences, operating procedures, product architecture or engineering details currently locked in static PDFs or slide decks, book a free 30-minute consultation and describe what you need to explain — we will tell you what an interactive version would take.
Book a free 30-minute call. Bring the thing you keep struggling to show people, and we'll tell you what an interactive version would take.