What is a Harmonograph in Motion Design?
Before computers, a harmonograph was a mechanical device that used swinging physical pendulums to draw complex geometric images. In modern motion design, we use mathematical formulas to simulate these pendulums. By combining multiple sine waves at different frequencies, the system creates mesmerizing, perfectly looping paths known as Lissajous figures.
This technique is a cornerstone of generative art (or mathematical art). Instead of manually drawing shapes, you set the mathematical rules, and the algorithm generates perfectly symmetrical, infinitely complex procedural motion.
Why Create Generative Art in the Browser?
Traditionally, creating this level of mathematical art required coding skills in languages like JavaScript (using libraries like p5.js or Three.js) or writing complex math expressions inside Adobe After Effects.
Animdock democratizes generative art by turning complex trigonometry into simple, visual sliders. Powered by the HTML5 Canvas API, the Harmonograph template calculates and renders these dense mathematical layers in real-time. It is a completely free, no-code animation tool that runs instantly in your browser.
Step-by-Step Guide: Drawing with Pendulums
The Harmonograph template does not use an uploaded logo; the star of the show is the math itself. Here is how to tune the parameters to create your own unique spirograph patterns.
Step 1: Tuning the Mathematics (The Curve)
The Curve panel is where you define the physical behavior of your digital pendulums:
- Ratio A (1–9) & Ratio B (1–9): These represent the core frequencies of your two main pendulums. The default setting (Ratio A:
3, Ratio B:2) creates a classic, elegant 3:2 harmony. Changing these numbers drastically alters the number of loops and intersections in your geometric pattern. - Phase (0–3.14): This shifts the starting point of the sine waves. Adjusting the phase from the default
1.57(which is exactly π/2) morphs the overall symmetry of the shape in real-time. - Layers (1–48) & Layer Spread (0–0.5): A single line is beautiful, but multiple lines create depth. By increasing the Layers (default
18) and adjusting the Spread (0.07), Animdock duplicates your curve and scales it outward, creating a dense, wireframe tunnel effect. - Twist (0–2): This parameter rotates each successive layer slightly. The default
0.5creates a stunning 3D spiral illusion, making your flat mathematical art feel like a deep, twisting vortex.
Step 2: Styling Your Spirograph (Appearance)
Once your math is perfect, use the Appearance panel to give your generative art a premium, high-tech finish:
- Line Width (0.4–25): Keep it thin (
1.1) for a delicate, architectural blueprint look, or crank it up for bold, abstract shapes. - Glow (Additive): This is a crucial feature for digital art. When turned on, the lines use an additive blending mode. Wherever the lines intersect and overlap, the color becomes brighter, creating a brilliant, glowing neon effect that mimics lasers or long-exposure photography.
- Color & Color Mode: You can choose a solid hex color (like the default purple
#7c6deb) for a clean, branded look. However, switching the Color Mode to Rainbow applies a dynamic color spectrum across the shape, highlighting the procedural, flowing nature of the mathematical curves.
Exporting Your Mathematical Art
Because Animdock handles all the rendering locally in your browser, your complex mathematical art is ready to ship instantly.
You can export your looping harmonograph as a high-quality WebM video file. Since WebM supports an alpha channel, the background remains completely transparent, allowing you to place this glowing geometry over any website or video. You can also export a crisp PNG image if you just need a beautiful, mathematically perfect still frame for a poster or background.
Best Use Cases for Harmonographs
The technical, precise, and abstract nature of generative art makes the Harmonograph template perfect for:
- Web3 & Blockchain Projects: The complex, interconnected loops perfectly visually represent cryptography and decentralized networks.
- Ambient Hero Backgrounds: A slow-moving, dark-themed harmonograph provides a premium, tech-forward background for SaaS landing pages without distracting from the text.
- Custom Loading Screens: Replace standard spinning wheels with a hypnotic, looping mathematical curve for a high-end user experience.
Key Takeaways
- A harmonograph uses pendulum math (Lissajous curves) to generate perfectly symmetrical, looping geometric art.
- Animdock is a free, no-code generative art browser tool that allows you to create these mathematical animations using simple visual sliders instead of programming.
- You can control the frequencies (Ratio A/B), add depth with Layers and Twist, and apply Additive Glow to create stunning neon intersection effects.
- Complex procedural art can be exported instantly as a transparent WebM video or high-resolution PNG file.