Fourier Epicycle Machine
Draw any shape or type your name, and a chain of spinning circles will retrace it. It is a real Fourier transform turning your path into rotating vectors, computed live on your device.
🔒 100% private — your drawing never leaves your browserHow does this run in my browser?
When you draw, the tool collects the points of your stroke and treats each one as a complex number, the x going on the real axis and the y on the imaginary axis. It then runs a Discrete Fourier Transform over that list. The transform breaks your path into a sum of pure rotations: each one is a circle of a certain size, spinning at a certain whole-number speed, starting at a certain angle. Add those rotating arrows tip to tail and the very last tip traces your original drawing. No server, no library, no upload. The math is a few dozen lines of JavaScript and the animation is plain Canvas.
Why it looks like magic
The surprising part is that almost any closed shape, even your handwritten name, is just a particular recipe of circles. The biggest circle handles the rough overall loop, and each smaller, faster circle adds finer detail. This is the same Fourier idea that powers JPEG images, audio equalizers, and MP3 compression, shown in the most literal way possible. Drag the Circles slider down and you watch detail melt away into a smooth blob; drag it up and the wobble snaps back to your exact line.
Things to try
Draw your signature in one continuous stroke and record the rebuild as a video to share. Type a short word and watch the circles hop between letters. Pull the circle count down to 3 or 4 to see the simplest possible approximation of a complex shape. Turn on the target overlay to see how closely the epicycles hug your original path as you add more terms.
How does drawing with circles work?
Your path becomes a list of complex numbers and is run through a Discrete Fourier Transform. Each frequency comes out as a rotating vector with its own radius, speed, and phase. Chained tip to tail, those vectors retrace your drawing.
Is my drawing uploaded anywhere?
No. The transform and the animation run locally in your browser using JavaScript and Canvas. Nothing is sent to a server.
Can it draw my name?
Yes. Switch to Type text, enter a short word, and it traces the outline of the letters into a path before rebuilding it from circles.
What does the Circles slider change?
It sets how many Fourier terms are used. More circles means a more exact match to your drawing; fewer circles gives a smoother, rounder approximation.
Does it work on a phone?
Yes, you can draw with your finger. Recording video depends on your browser, and is available in most desktop browsers.
I build tools like this every day.
Senior full-stack engineer, available for senior or contract work, fully remote. See the rest of the lab or get in touch.