Use this when the lesson is about a structure — and the fastest way to teach it is to draw the whole thing on one labelled sheet. Here: the anatomy of an HTTP request.
Copyable exemplar. Lift the <section id="picture"> block into a lesson built from assets/lesson-template.html — it already shares these design tokens and the .svgfig / .tech-toggle patterns.
Every time your browser asks a server for something — a page, an image, a login — it sends a small, plain-text request. It is just a few lines of writing, in a fixed order, that say what you want, where it lives, a little extra context about you, and sometimes some data you are handing over.
Think of it like a posted parcel. The shipping label says the action and the address (the method and URL). The customs slip and return address are the headers. Whatever you sealed inside the box is the body. The post office (the server) reads the label, looks inside if needed, and ships a reply back.
The four parts of a real request, drawn once with callout lines. Tap a part in the legend to focus it.
No part selected dims nothing — pick one to spotlight it, or “Show all” to reset.
That dark panel is a faithful, byte-for-byte HTTP/1.1 message. The first line is the request line: METHOD SP request-target SP HTTP-version CRLF. Each header is field-name ":" OWS field-value CRLF. A bare CRLF (the dashed “blank line”) terminates the header block; everything after it is the message body.
The server reads exactly Content-Length bytes as the body — here 42, the byte length of the JSON. Get it wrong and the parser either truncates your payload or hangs waiting for bytes that never arrive. (Chunked transfer or HTTP/2 framing replace this counting, but the four conceptual parts stay identical.)
GET and HEAD are safe and idempotent (no side effects); POST is neither — sending it twice can create two orders. That distinction is exactly why retry logic and caching treat methods differently.
Reach for one big annotated SVG when the thing you’re teaching has named parts in a fixed arrangement — a request, a file format, a data packet, a UI layout, a circuit. A wall of prose makes the reader hold the shape in their head; the sheet shows the shape and lets the words point at it.
Think of an exploded-view diagram in a furniture manual: every screw and panel is drawn in place with a line to its name. You don’t read it — you see where each piece goes.
Draw the subject once as the visual anchor (left), place labels on the right with <rect> + <text> cards, and connect each with a <line marker-end="url(#arw)"> using a single shared arrowhead <marker>. Group every callout in a <g class="callout" data-part="…"> so JS can spotlight one part by dimming the rest — that turns a static figure into a guided tour.
Give the <svg> a role="img" and an aria-label that reads the whole diagram as a sentence, so a screen-reader user gets the same content the sighted reader sees. Keep type at 11–15px, use hex fills (CSS vars don’t resolve in SVG presentation attributes), and honour prefers-reduced-motion.