Axiom.

How this board was made

AXIOM is a fictional small press for visual mathematics. The audience is anyone who was told they were "not a maths person"; the page's single job is to make you watch a proof happen — four results that demonstrate themselves in chalk, with nothing to take on faith.

Concept

Chalkboard formalism: deep board green, chalk that draws itself, mathematics that is actually correct. Every figure is generated or verified numerically — the rearrangement is a genuine rigid-motion proof, the spiral is a true logarithmic spiral through exact corner points, the Galton board is a real binomial process. Serious, playful, precise.

Palette

#12211CBoard green-black. Slate, not soot — a green cast keeps it a blackboard rather than a void.

#F2EFE6Chalk. Warm off-white; pure white would read as pixels, not calcium.

#E8D06AChalk yellow. The lecturer's second stick — reserved for conclusions: c², the true spiral, the normal law.

#D98B8BChalk red-pink. The counterpart voice: b², distances to B, the exact binomial ticks.

Yellow always marks what the proof concludes; pink marks the second operand being compared. The discipline is the point — colour is notation here, not decoration.

Type

STIX Two Text — display & mathematics

Designed for scientific publishing, so a², φ, θ, ℓ and ∎ are native glyphs, not tourists. Set italic at display sizes it has the voice of a theorem. The hero wordmark, statements, equations and figure labels all use it.

Lora — reading text

A calmer serif for captions and supports, so the mathematical serif keeps its authority. Letterspaced Lora caps serve as eyebrows and controls.

Techniques

Self-drawing engine — every figure element carries a class; a builder measures each path with getTotalLength() and animates stroke-dashoffset at near-constant chalk speed (duration ∝ length), sequenced in DOM order like a hand drawing. GSAP + ScrollTrigger, once per figure.
Chalk texture — an SVG feTurbulence + feDisplacementMap filter wobbles every stroke; a tiled fractal-noise data-URI at 5% opacity dusts the whole board. No raster assets anywhere.
Pythagoras rearrangement (signature) — one square of side a+b holds four congruent right triangles. The bottom-left rectangle is split along the anti-diagonal specifically so all four triangles share one chirality, which makes every move a pure rotation + translation (no reflections, no cheating). The three rigid motions — slide 4 units, rotate −90° about (0,b), rotate +90° about (a,a) — were verified numerically to map arrangement one exactly onto arrangement two. The uncovered area is a²+b² before and c² after; GSAP animates the transforms with svgOrigin pinned at each rotation centre.
Golden spiral — the rectangle is subdivided programmatically (cut cycle left/top/right/bottom); quarter-circle arcs chain through the cut corners. The gold overlay is the true spiral r = φ^(2θ/π) drawn from the exact pole (W, H)·φ/√5 — the intersection of the two reciprocal diagonals — and passes through all ten corner points with error below 10⁻¹² units.
Circle of Apollonius — centre and radius computed from k = 2 in closed form; every rendered spoke pair satisfies |PA|/|PB| = 2 to machine precision.
Galton board — canvas 2D. Each ball makes ten fair left/right decisions (a genuine Binomial(10, ½) sample), animated between peg rows, then binned. Overlays: the normal approximation N(5, 2.5) in yellow and the exact expectation n·C(10,k)/2¹⁰ as pink ticks, both sharing the histogram's live scale. Sample mean and σ update against the predicted μ = 5, σ = √2.5 ≈ 1.581.

Iteration log

Pass 1 · Craft

Found: hero figure lines crossing the dek copy at 375px; inconsistent SVG label sizes (19/21); the "2ℓ / ℓ" annotations sitting on their own spokes; the spiral's scaffolding squares competing with the arcs; Galton bars reading washed-out grey. Changed: hero figure dimmed to 30% under 900px; labels unified at 20; annotations offset clear of their lines; squares dropped to 42% and arcs to 1.6px so the gold spiral owns the top layer; bar alpha raised to .36; support copy for Proposition III rewritten ("The first nine cuts of infinitely many").

Pass 2 · Depth

Enriched the signature: after the rearrangement, the outlines of a² and b² now persist at 16% — pale ghosts of where the squares used to live, echoed in the caption. Added a micro-interaction: clicking the Galton canvas drops a single ball. The hero formulas now name themselves on hover (Euler's identity; Hippasus' scandal). The replay button stays disabled until the figure finishes drawing, and the first slide got a distinct power3.inOut ease so the three moves don't feel cloned.

Pass 3 · Hardening

Verified 375px layout end-to-end (no horizontal overflow; canvas relays to 311px; stat numerals downsized under 640px). Exercised the full reduced-motion path with a forced media query: figures render complete, the proof shows its final state statically, the Galton board fills instantly with 1,200 correctly-distributed balls, replay hides. Confirmed DPR capped at 2, rAF loop pauses on document.hidden and off-screen, balls flush to bins on resize. Chanel rule: removed the third floating hero formula (ζ(s)). Zero console errors on a clean load.

Colophon

Built as a single self-contained HTML file. Libraries: GSAP 3.12.5 + ScrollTrigger only. Fonts: STIX Two Text, Lora (Google Fonts). Everything visible is SVG, canvas 2D, or CSS — no images, no build step.