Lissajous SVG Generator

Lissajous curves: the elegant math of two perpendicular oscillations

Lissajous curves (or Lissajous figures) were first systematically studied in 1857 by the French physicist Jules Antoine Lissajous, who built an ingenious apparatus of two perpendicular tuning forks with mirrors to project the figures of light onto a screen. The American mathematician Nathaniel Bowditch had described the same family of curves as early as 1815, which is why some textbooks call them Bowditch curves. They became the visual workhorse of oscilloscopes: feed two signals into the X and Y inputs in XY mode and the screen draws the figure in real time — a quick, intuitive way to compare frequencies and phase.

Parametric equations and how the parameters shape the figure

A Lissajous curve is described by two sinusoids on perpendicular axes:

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

Three quantities decide the shape: the frequency ratio a:b, the phase difference δ and the amplitudes A, B. Some canonical cases:

• 1:1 ratio — circle (δ = 90°), ellipse (other δ) or a straight diagonal line (δ = 0° or 180°).
• 1:2 ratio — the classic figure-eight (lemniscate-like) when δ = 90°.
• 2:3 ratio — three-lobed pretzel.
• 3:5, 5:4, 7:5 — increasingly intricate woven shapes prized for their visual rhythm.

When a/b is rational, the curve closes on itself and is periodic; when irrational, it never closes and densely fills the rectangle [-A, A] × [-B, B].

From physics lab to broadcast logos

In the 19th century Lissajous used these figures to tune musical pitches — a phase-locked figure meant identical frequencies. Modern physics labs still use them on oscilloscopes for the same reason. Culturally, the curves leapt off the screen into pop design: the ABC television logo introduced in 1962 was inspired by Lissajous patterns, and the Australian Broadcasting Corporation's "lissajous loop" logo (1965, by Bill Kennard) is literally a 1:3 ratio figure. NASA's NASA TV motion graphics, the visual identity of music software like Reactable, and countless live-coding visuals all borrow the same DNA.

Generating Lissajous SVGs

Programmatically you iterate t over [0, 2π * lcm(a, b)], sample 500–2000 points, and emit a single <path>. Variations that liven up the visual:

• Damping — multiply by e^(-k·t) to mimic a decaying pendulum; popular for "loading" animations.
• Amplitude or frequency modulation — slowly vary A or a with another sinusoid for organic shapes.
• Color along the path — split into many <path> segments and animate the hue.

FAQ

How do Lissajous curves differ from Spirographs? Both are parametric, but Lissajous uses two independent sinusoids (no circles rolling), while a spirograph is generated by a wheel rolling inside or around another circle. Lissajous figures stay inside a rectangle; spirographs trace roulette curves.

Does the curve always close? Only when the frequency ratio a/b is rational. With an irrational ratio (e.g. a = √2, b = 1) the path is dense and never closes.

Are oscilloscopes still used for this? Yes — analog and digital oscilloscopes still ship with XY mode. Audio engineers use it to detect phase issues between stereo channels.

Why is the math so popular in tattoos and minimalist art? Because a tiny set of integer ratios produces an entire vocabulary of shapes with no irregularities — the curves feel "perfect" without looking sterile.