Early Access: CSS Cross-Stitch

This demo is a simple idea, but I like how it looks (especially the top panel). The stitches have some texture and shadows (done with CSS gradients) to make them look more realistic. You can see the code in this private CodePen demo.

The back of the cross-stitch pattern doesn't look that terrible. However, I may need to update the code to make it look worse.

Fun fact: I enjoy doing cross-stitch. It was a thing my mother taught me as an adult, and I liked trying different things (did you know that you can cross-stitch a QR code, and it will work when scanned?)