A hand traces a rice-flour kolam: one unbroken line looping around every dot.
Kolam are the line drawings made each morning on South Indian doorsteps, and this one is built with the mirror-curve model used to study kolam and Lusona sand drawings. The dots sit at the centers of grid cells and the line runs diagonally from one edge midpoint to the next, so it always passes between dots. Each edge between two dots holds nothing (the line crosses itself) or a two-sided mirror lying along or across the edge, and the grid's outline is all mirror, so the line always closes. Swapping a crossing for a mirror joins two loops or, on a loop crossing itself, keeps or splits it depending on the mirror, so the generator scatters mirrors in symmetric sets (quarter-turn symmetry first on odd square grids, then a half turn or a mirror; even grids use a mirror) and hill-climbs to a single line. The curve is smoothed with Bezier arcs and sprinkled grain by grain into a powder layer while leaf shadows stir on the floor.
Try it. Click or tap between two dots to cycle that edge through a crossing, a mirror along the edge and a mirror across it; extra loops show up in colored powders. J joins the loops back into one line, M shows the mirrors, + and - change the grid size, D switches square and diamond, and R draws a new kolam. Left alone, a new kolam is traced every few seconds.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a kolam generator with JavaScript and the HTML canvas element. Kolam are South Indian drawings where one continuous line loops around a grid of dots. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a warm earthy brown.
- Make a 5 by 5 grid of square cells and put a white dot in the center of each one.
- Use the "mirror curve" model. The line moves diagonally from the midpoint of one cell edge to the next, half a cell at a time. Every edge between two cells holds either nothing (the line crosses straight through) or a small mirror that bounces the line back. Edges on the outside of the grid are always mirrors.
- Starting at any edge midpoint, follow the line, flipping one direction component whenever it hits a mirror, until it returns to its start. Count how many separate loops the whole grid makes.
- Draw the path as a white line, and let me click an edge to add or remove a mirror. Show the loop count.
Once that works, make it beautiful:
- Smooth the line with Bezier curves: straight through crossings, rounding off just before each mirror, so it curls around the dots.
- Generate patterns automatically: add mirrors at random, and only keep a mirror if the drawing is still one single loop. Place them symmetrically so the result looks traditional.
- Make it look like rice flour: instead of stroking, stamp many tiny soft white dots along the path with a little random scatter.
- Animate the drawing: reveal the line gradually from start to end, as if someone is tracing it.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as diamond-shaped dot grids, colored powders for separate loops, or drawing a hand that follows the line.
