Pixel art becomes Fair Isle knitting, stitch by twisted stitch, live on the needle.
Every stitch is the V of a knit loop: two plump, twisted legs drawn as layered strokes that fake a lit cylinder, crossed by ply grooves and haloed with stray fibers, pre-rendered per yarn color and stamped from the bottom row up so each V tucks behind the stitch above. The colors come from a pixel chart, repeated across and up the swatch the way Fair Isle charts are knitted. The working needle travels along the row and each new stitch pushes only its own column down, so the fabric eases down in a traveling wave, while the bottom curls toward you on a cylinder, foreshortened and shaded. Drop a stitch and its column unravels into a ladder of horizontal rungs; a crochet hook can latch it back up.
Try it. Paint the chart on the right and the swatch changes instantly: pick a yarn ball as the brush, click a swatch to re-dye that ball, or choose a motif (keys 1 to 4). Click the fabric to drop a stitch, click a ladder to latch it up, press D to drop one at random, Space to pause and the up and down arrows to change speed.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a knitted colorwork swatch 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 it a dark background.
- Define a small pixel chart, about 16 by 16, as an array of strings where each character is a color index (for example a heart or a star on a plain ground), plus a palette of three or four yarn colors.
- Lay out a grid of stitches about 15 pixels wide and 11 tall. Tile the chart across and up the grid to pick each stitch's color.
- Draw each stitch as a V: two short thick strokes with round caps, one leaning left and one leaning right, meeting at the bottom center. Draw the rows from the bottom up so each V's tips tuck under the row above.
Once that works, make it beautiful:
- Shade each leg like a round strand of yarn: stroke the same curved path three or four times, each one narrower, lighter and nudged slightly up and left, so it looks lit from above. Add a soft shadow under the first stroke and a few short diagonal lines across it for the ply twist.
- Pre-render one left leg and one right leg per yarn color onto small offscreen canvases, then stamp them with drawImage, so thousands of stitches redraw every frame at 60 fps.
- Add tiny random offsets per stitch so the fabric looks hand knit.
- Show the chart beside the swatch and let me click its cells to repaint the motif.
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 animating the needle knitting row by row, dropping a stitch so a ladder runs down a column, or curling the bottom edge of the fabric.
