Mathematics is the hidden language of visual beauty. From the Fibonacci spiral in sunflowers to the fractal branching of trees, mathematical patterns appear everywhere in nature — and they make stunning art when rendered with code.
This guide covers the most beautiful mathematical techniques for generative art: fractals, sacred geometry, curve families, tessellations, and number theory visualizations. Each tutorial includes interactive code examples.
19 articles in this guide
A hands-on guide to math art — how to turn mathematical formulas into stunning visual art using JavaScript. Covers spirals, tilings, Lissajous curves, rose curves, polar patterns, the golden ratio, and more, with working code examples you can run in your browser.
A beginner's guide to fractal art — what fractals are, why they're beautiful, and how to generate Mandelbrot sets, Julia sets, recursive trees, and L-systems with simple JavaScript code you can run in your browser.
Learn to build stunning fractal trees from scratch with JavaScript and Canvas. 8 interactive examples: basic recursive tree, stochastic trees, L-system trees, wind animation, seasonal colors, 3D projection, interactive growing tree, and generative forest art.
Learn to create Fibonacci spirals, golden ratio patterns, and phyllotaxis art with JavaScript and Canvas. 8 interactive examples: golden spiral, Fibonacci sequence visualizer, phyllotaxis sunflower, golden rectangle subdivision, Fibonacci word fractal, spiral galaxy, golden angle tree, and generative Fibonacci art.
Learn to build stunning sacred geometry patterns from scratch with JavaScript and Canvas. 8 interactive examples: Flower of Life, Metatron's Cube, Sri Yantra, Seed of Life animation, golden spiral mandala, Platonic solids projection, sacred tiling patterns, and generative sacred art.
Learn to create stunning mandala art programmatically with JavaScript and Canvas. 8 interactive examples: basic mandala, dotwork mandala, petal mandala, animated rotating mandala, Islamic geometric mandala, fractal mandala, interactive mouse mandala, and generative mandala art.
A practical guide to geometric art with code — how to create mesmerizing geometric patterns using JavaScript and Canvas. Covers sacred geometry, Islamic patterns, Voronoi diagrams, kaleidoscopes, penrose tilings, and optical illusions, with working code examples.
Learn to create tessellation art with JavaScript and Canvas. 8 interactive examples: regular tilings, Escher-style transformations, Penrose tilings, hyperbolic tessellations, Voronoi cells, Islamic star patterns, aperiodic monotiles, and animated morphing tiles.
Learn to create Voronoi diagrams, Delaunay triangulations, and organic cellular patterns with JavaScript and Canvas. 8 interactive examples: basic Voronoi, distance metrics, weighted Voronoi, Lloyd relaxation, Delaunay triangulation, mosaic filter, crystal growth simulation, and generative Voronoi art.
Learn to draw and animate Bézier curves with JavaScript and Canvas. 8 interactive examples: linear interpolation, quadratic curves, cubic curves, De Casteljau's algorithm, curve editors, spline paths, text on curves, and generative Bézier art.
Learn to create and animate Lissajous curves with JavaScript and Canvas. 8 interactive examples: basic figures, frequency ratios, phase animation, 3D projections, harmonograph simulation, Lissajous knots, audio-reactive curves, and generative Lissajous art.
Learn to draw spirograph patterns with JavaScript and Canvas. 8 interactive examples: hypotrochoids, epitrochoids, multi-gear spirographs, rose curves, guilloché patterns, animated drawing, spirograph art generator, and interactive parameter explorer.
Learn to create stunning string art programmatically with JavaScript and Canvas. 8 interactive examples: basic cardioid envelope, parabolic curves, circular string pattern, multi-layer design, epicycloid string figure, interactive string sculptor, 3D string surface, and generative string art composition.
Learn to build interactive kaleidoscope patterns with JavaScript and Canvas. 8 working examples: basic reflection symmetry, hex kaleidoscope, image-based kaleidoscope, animated rotating kaleidoscope, interactive drawing kaleidoscope, triangular tiling, fractal kaleidoscope, and generative kaleidoscope art.
Learn to create moiré patterns with JavaScript and Canvas. 8 interactive examples: line interference, concentric circles, rotational moiré, wave superposition, dot screen halftone, animated phase shift, interactive mouse moiré, and generative moiré art.
Learn to create stunning op art and optical illusions programmatically with JavaScript and Canvas. 8 interactive examples: checkerboard warp, concentric pulse, moiré interference, rotating spiral, Fraser spiral illusion, Bridget Riley stripes, impossible cube, and generative op art composition.
Learn to create optical illusions with JavaScript and Canvas. 8 interactive examples: Checker Shadow illusion, impossible triangle, rotating snakes, Müller-Lyer arrows, Kanizsa triangle, Hermann grid, Café Wall illusion, and generative op art.
Learn to build mesmerizing circle packing art with JavaScript and Canvas. 8 working examples: basic circle packing, image-based packing, recursive Apollonian gasket, organic growth simulation, text-filled circles, interactive packing, circle packing tree visualization, and generative circle packing art.
Learn to build mesmerizing isometric art with JavaScript and Canvas. 8 working examples: isometric grid, cube renderer, voxel city, terrain heightmap, animated water, character sprites, interactive block editor, and generative isometric landscape.