How this lesson draws itself

Zero images, one idea: the diagrams are computed from the same mathematics they teach.

This is a code-art site. Every figure is generated at runtime from the Fourier partial-sum function itself — the page cannot lie about the math, because the math is the renderer.

The epicycle machine

The hero canvas stacks rotating circles with radii 4/(πn) for odd n — the square wave's true coefficients. The chain's endpoint is unrolled into a trace array that scrolls rightward, so the wave is literally the machine's diary. A slider re-rigs the machine from 1 to 13 harmonics and updates the equation caption to match.

Self-drawing figures

Each figure is an empty <svg> plus a builder function, run once by an IntersectionObserver the first time you reach it. Strokes animate with the classic stroke-dasharray/-dashoffset trick; the spectrum bars rise with staggered scaleY transitions. Under prefers-reduced-motion everything renders complete and static — same truth, no theater.

Progress as a wave

The fixed header holds the page's signature: a square wave whose harmonic count is 1 + floor(scroll% × 8). At the top of the page it is one lazy sine; by the coda it is a 9-harmonic square. Your reading is the partial sum — the lesson's thesis, enacted by the chrome.

Type & palette

• STIX Two Text — a serif built for mathematics, used for display, equations and figure numerals.
• Schibsted Grotesk — body and interface.
• Graph-paper palette: #F2F5F8 with a live 36px CSS-gradient grid, ink #17212B, wave blue #2563A8, physics red #D33F2C.

Deployment

npx wrangler pages deploy set2-c --project-name=set2-c

Static deploy to Cloudflare Pages; three self-critique passes at 1440px and 390px, logged in NOTES.md.

Designed and built end-to-end by Claude Fable 5.