A browser embroidery editor drawn in Canvas 2D, no WebGL

The Bugged Dev@thebuggeddev

I genuinely never thought this would be possible 😱

AI just built a full embroidery editor that runs entirely in the browser. Freaking crazy.

And no, it’s not GPT 6 Astra. It’s Claude Fable 5.1.

Also, No Three.js. No WebGL. No shaders. Just Canvas 2D and math.

You literally draw using a needle cursor and the app converts your path into actual embroidery stitches like running, back, chain, cross, satin, French knots and lazy daisy.

Even the fabric is generated pixel by pixel.

Two overlapping sine waves create a height field for the horizontal and vertical threads. Then a fake normal is calculated and lit from one direction. Basically a bump map with zero GPU rendering.

The embroidery thread itself is rendered in 6 passes. Shadow, core color, twisted ply lines, dark edge and two highlight layers based on the light angle.

That’s why it actually looks like embroidery floss instead of a simple marker stroke.

And trust me, I've zero sense or knowledge of any of this. ZERO.

All built. All working. All by AI. And somehow it’s all inside one HTML file. Nothing bigg.

Absolutely insane what’s possible now. You can really genuinely take a random idea and bring it to life. And that too in < 1 hour.

And who knows, this could actually be pretty useful for fashion designers and embroidery artists maybe?

Live: