Lab notes, in full

Every article on how we design, animate and simplify SVG explainers — the craft behind the diagrams, written down.

How to Make Animated SVG Flow Diagrams for Education

A practical walkthrough of building moving flow lines that teach.

Using Stroke-Dashoffset for System Animation

One CSS trick for animating paths, flows and progress.

How to Simplify Complex Real-World Systems

Deciding what to keep and what to drop in a teaching model.

What Is System Thinking and How It Applies

Thinking in parts, flows and feedback across machines and orgs.

Best Practice for Interactive Explainer Page Design

Layout, pacing and interaction that stays out of the way.

How to Design Clean Cutaway SVG Diagrams

Separating shell and internals for a readable cross-section.

Tips to Separate Outer Shell and Internal Parts for Click-to-Reveal

Keeping shell and internals on their own layers so parts reveal on click.

Drawing Flow Streamlines and Boundary Layers

Wireframe-like techniques for making fluid motion visible.

Rendering a Stress Heatmap Inside SVG

Gradients and clipping to show stress across a beam.

From Engineering Drawing to Teaching Cutaway

The workflow that turns dense drawings into clear diagrams.