Joy of Math

Nine interactive demos rendered live in your browser — and every one of them is now backed by a Glyph spec. Drag the sliders, watch the equations come alive; then scroll to see the byte-stable SVG an AI agent can author from English. Six parametric curves, photon paths through curved spacetime, particle flow, propagating waves, Turing patterns — all on a single grammar.

Start with Lissajous ↓ Life in Glyph ✨ See the grammar ↓ Try the playground Learn the grammar
New in v0.3 grammar: data.shape: "recurrence" data.shape: "geodesic" data.shape: "pde-solve" streamline.colorBy

1Lissajous Curves

Two perpendicular sine waves drawn against each other. As the frequency ratio a:b changes, the curve sweeps through every closed shape a string can make: an ellipse, a figure-eight, a knot.

x = A · sin(a·t + δ)   y = B · sin(b·t)

The phase δ ticks forward continuously — at δ = 0 the figure-eight is "open", at δ = π/2 it pinches into a vertical line, then back. This is the underlying physics of any two harmonic oscillators sharing a screen.

2Spirograph: Hypotrochoid + Epitrochoid

A point attached to a small circle rolling inside a big circle traces a hypotrochoid. Rolling outside traces an epitrochoid. Tune R, r, d — get cardioids, nephroids, rose curves, full Spirograph patterns.

x = (R−r)·cos(t) + d·cos((R−r)/r · t)  
y = (R−r)·sin(t) − d·sin((R−r)/r · t)

Set R = 1, r = 1, d = 1 in epitrochoid mode and you've drawn a perfect cardioid — the antenna-radiation pattern of every directional microphone on Earth.

3Curlicue Spiral

Take tiny unit steps. At step n, turn by an angle that scales with n². The result is a fractal-like organic spiral that "blooms" continuously — every irrational base angle θ produces a different visual language.

z_{n+1} = z_n + exp(i · (θ·n² + t))

The golden-angle θ ≈ 2.39996 rad (137.5°) is exactly the angle sunflower seeds use to pack densely. Try it — the resulting curlicue lattice is the seed pattern.

4Archimedean Spiral

The simplest spiral imaginable: r grows linearly with θ. Animate the growth rate b and the spiral breathes — every spring, every nautilus shell, every vinyl record's groove.

r(θ) = a + b·θ

Every spring, every nautilus shell, every vinyl record's groove. The straightest possible spiral.

5Butterfly Curve — Temple H. Fay, 1989

A transcendental parametric curve. Sweep t from 0 to 12π and the trace draws a six-winged butterfly. Few formulas this short produce a shape this complex.

x = sin(t)·(e^cos(t) − 2·cos(4t) − sin⁵(t/12))
y = cos(t)·(e^cos(t) − 2·cos(4t) − sin⁵(t/12))

The butterfly emerges scene by scene — the pen draws six wings as t crosses the periodic structure of cos(4t). When the trace completes a full loop (t = 12π) the figure is whole.

6Gravity Bends Light

Einstein's general relativity says: mass curves spacetime. Light follows the straightest possible path through that curved space, which makes it visibly bend around heavy objects. Drag the mass slider — watch space deform, watch the light rays follow.

deflection angle = 4·G·M / (c² · b)
(b = impact parameter, M = lens mass)

When the deflection is large enough, you get gravitational lensing — a single distant galaxy appears as multiple arcs or a full Einstein ring around the foreground mass. This is how astronomers weigh dark matter without ever seeing it.

7Particle Flow Field

Thousands of particles drift through a velocity field defined by a stream function ψ(x, y, t). Particle velocity is the curl of ψ (incompressible flow — no sources or sinks). The result: gorgeous swirling patterns that reorganize as the field morphs. Click anywhere on the canvas to release a fresh burst of 80 tracer particles right there.

v = ∇ × ψ   where   ψ = sin(k·x + ωt) · cos(k·y) + cos(k·x) · sin(k·y − ωt)

This is the math behind every weather-map wind animation you've ever seen. NOAA / the Weather Channel / earth.nullschool.net all use the same Lagrangian-particles-on-Eulerian-field trick.

8Wave Equation: 2D Ripples

The same partial differential equation governs water surface waves, sound in air, light in a vacuum, and a vibrating drum head. Click anywhere to drop a pebble and watch the ripples propagate, reflect off the walls, and interfere with each other.

∂²u/∂t² = c² · ∇²u − γ · ∂u/∂t

Solved by an explicit finite-difference scheme on a 240×240 grid: each cell's next state is computed from its 4 neighbors. The same algorithm scaled to 1024³ runs on every modern supercomputer doing climate / seismology / ocean simulation.

9Reaction-Diffusion: Turing Patterns

Two chemicals U and V react and diffuse on the same grid. Despite starting from an almost-uniform field, the system spontaneously generates leopard spots, zebra stripes, fingerprint ridges, or coral worms — depending on just two parameters. Alan Turing's 1952 paper "The Chemical Basis of Morphogenesis" proved this math really does explain animal coats.

∂U/∂t = Dᵤ·∇²U − U·V² + F·(1 − U)
∂V/∂t = Dᵥ·∇²V + U·V² − (F + k)·V

Same algorithm runs every animal-coat-pattern paper for the past 70 years. Vary F and k by 0.001 and you cross a phase boundary — leopard becomes zebra becomes labyrinth becomes self-replicating spots. Real morphogenesis is governed by ~50 such parameters; this 2-parameter toy already covers an astonishing range of biology.

Grammar Catalog

Every visualization on this page is authored in this grammar. Each card below shows the JSON spec on the left and the byte-locked SVG output on the right. The compiler ships these as locked fixtures in CI across Ubuntu / macOS / Windows × Node 20 / 22 — same spec → same SVG, every platform, every run.

data.shape: "trajectory" v0.2

Parametric curves x(t), y(t) and 2D ODE systems. Powers Lissajous, hypotrochoid, butterfly, Archimedean spiral, and the predator-prey + damped-oscillator demos.

// Lissajous figure-eight
{
  "shape": "trajectory",
  "params": { "a": 3, "b": 2, "d": 0 },
  "x": "sin(a*t + d)",
  "y": "sin(b*t)",
  "t": { "min": 0, "max": 6.283, "steps": 800 }
}
Lissajous trajectory shape rendered to byte-locked SVG

data.shape: "recurrence" v0.3 new

Discrete iteration state_{n+1} = f(state_n, n). Curlicue curves, logistic map, iterated function systems. Schema validates that state, initial, and step keys form the same set; n is reserved as the step index.

// Golden-angle curlicue
{
  "shape": "recurrence",
  "state": ["x", "y", "theta"],
  "initial": { "x": 0, "y": 0, "theta": 0 },
  "step": {
    "x":     "x + cos(theta)",
    "y":     "y + sin(theta)",
    "theta": "theta + 2.39996 * n"
  },
  "steps": 8000
}
Golden-angle curlicue recurrence rendered to byte-locked SVG

data.shape: "geodesic" v0.3 new v2

Null geodesics through the equatorial plane of a Schwarzschild black hole. v1 ships the weak-field post-Newtonian acceleration a = −2M·r̂/r² (reproduces Einstein's 4M/b deflection). v2 adds the full strong-field integrator d²r/dλ² = L²(r−3M)/r⁴ in (r, φ, ṙ) — photon-sphere orbits at r = 3M, event-horizon capture at r = 2M.

// Strong-field — photons near the photon sphere
{
  "shape": "geodesic",
  "metric": "schwarzschild-strong",
  "mass": 1,
  "seeds": [
    { "x0": -30, "y0":  5.4, "vx0": 1, "vy0": 0 },
    { "x0": -30, "y0":  4.0, "vx0": 1, "vy0": 0 }
  ],
  "step": 0.05, "max_lambda": 200
}
Strong-field Schwarzschild geodesic shape rendered to byte-locked SVG

data.shape: "pde-solve" v0.3 new v2

2D PDE solvers on a structured grid. v1: kind: "heat" via explicit Euler. v2: "wave" via leapfrog (with damping + initial_velocity) and "reaction-diffusion" via Gray-Scott two-species coupling. Per-kind CFL stability checked at schema time.

// Gray-Scott leopard spots
{
  "shape": "pde-solve",
  "kind": "reaction-diffusion",
  "domain": { "x": [-1,1], "y": [-1,1] },
  "grid": { "rows": 24, "cols": 24 },
  "initial_U": "1",
  "initial_V": "exp(-40*(x*x + y*y))*0.3",
  "params": { "Du": 1.0, "Dv": 0.5,
              "F": 0.062, "k": 0.062 },
  "boundary": "periodic",
  "steps": 200, "dt": 0.001
}
Gray-Scott reaction-diffusion rendered to byte-locked SVG

mark: "streamline" + colorBy v0.3 new v2

Vector-field integrator emitting bidirectional RK4 flow lines from a grid of seeds. v1: colorBy: "angle" hues each polyline by velocity direction at the seed; "speed" varies lightness by velocity magnitude. v2: colorBy: "step" emits one <path> per polyline segment with a 0°→270° rainbow trail showing arc-length progression.

// Rotation field with rainbow step gradient
{
  "mark": "streamline",
  "streamline": {
    "dxdt": "-y",
    "dydt": "x",
    "seeds": { "kind": "grid",
                "rows": 4, "cols": 4 },
    "step": 0.05, "maxSteps": 120,
    "domain": { "x": [-2,2], "y": [-2,2] },
    "colorBy": "step"
  }
}
Streamline mark with colorBy: 'step' rainbow trail rendered to byte-locked SVG

What this means for Glyph

When this page first shipped, half the demos linked to existing Glyph specs (data.shape: "trajectory" handles every parametric curve) and the other half lived in a different regime — discrete iteration, vector-field advection, PDE solvers, relativistic geodesics — that the grammar didn't model yet.

It models them now. Across v0.3, four RFCs shipped extensions that close the gap: data.shape: "recurrence" (curlicue, logistic map, iterated function systems), data.shape: "geodesic" (null geodesics through Schwarzschild spacetime, weak- and strong-field), data.shape: "pde-solve" (heat, wave, reaction-diffusion on a structured grid), and mark: "streamline" with per-polyline color modes including the v2 rainbow-trail "step" gradient. Every demo on this page is now backed by a byte-locked Glyph fixture in CI.

The bigger vision: Glyph as the viz layer agents reach for to render any formula, dataset, or algorithm. Grammar of graphics over math, not just bar charts. The recipe-idea form is the single fastest way to grow it — file what you want to render and the grammar follows.

⭐ Star on GitHub Add a recipe Discuss