Manuscript knot panels woven from a grid of breaks. Click to reweave the threads.
The panel is a grid of cells with a crossing site at the midpoint of every cell edge, and the strands run diagonally from site to site, so a panel with no breaks is a plain plait. A break is a mirror on a site, lying along the edge or across it: a strand that meets one turns back instead of crossing, and the border is lined with breaks so every strand stays inside. Walking from site to site always closes into loops, so the knot is one or more threads, and each is traced and laid in its own pigment (mirror-image threads share one, and a single unbroken thread is gilded). The walk is smoothed with Bezier curves, over/under parity is propagated along every thread so the weave always alternates, and the holes between ribbons are found as faces of the planar graph and painted in two colors, by whether they hold cell centers or cell corners.
Try it. Click or tap a crossing to cycle it through a break along the edge, a break across it, and back to a crossing; with mirror symmetry on, the edit is reflected into all four quarters. R or Space draws a new design, C clears to a plain plait, and S toggles symmetry. Left alone, it keeps editing itself.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a Celtic knotwork generator with JavaScript and the HTML canvas element. 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 a dark panel in the middle.
- Lay out a grid of square cells, about 10 by 6. Put a "site" at the midpoint of every cell edge. Edges on the outer border are always walls.
- Each site is either a crossing or a break. A strand moves diagonally from site to site, half a cell at a time. At a crossing it carries straight on. At a break lying along a horizontal edge it flips its vertical direction (and along a vertical edge its horizontal direction), like a ball bouncing off a wall.
- Starting from every unvisited site and direction, follow the strand until it comes back to where it started. That closed walk is one thread. Mark everything it visits.
- Draw each thread as a thick line through the sites it crosses, with a different color per thread. Click near a site to toggle a break there and redraw.
Once that works, make it beautiful:
- Smooth the path: pass straight through crossings and turn in a rounded curve just before each break, using Bezier curves.
- Draw the strands as ribbons: a dark outline, then the colored body, then a thin light highlight.
- Weave them: at every crossing, redraw a short piece of one strand on top. Alternate over and under as you walk along each thread.
- Add a gold frame and a parchment background, and place breaks symmetrically so designs look balanced.
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 painting the holes between ribbons, diagonal breaks for pointed corners, or animating a light running along each thread.
