So I happened upon squaredesign site and was impressed by their trippy background squares that responded to mouse movement (tutorial here).

I got jealous and wanted my own interactive background. Plus @miketaylr’s is mad sweet. Turns out, I’m lazy. Never fear. Mr Doob recently put out the magical canvas procedural illustration application Harmony and generously licensed it MIT.

I adapted the code for use as a background, but felt like it still missed something. It needed an easter egg. Oh yes. Taking inspiration from the Harmony Harmony meme (example), I decided an Erasure music video was in order.

Leveraging code from the $1 Unistroke Recognizer (which is righteous), it takes snapshots between drawing pauses and looks to see if you drew a star. If it thinks you did.. then:

The code for the bg integration is on github: /paulirish/harmony. If you want to do the same thing, using the code here is probably most helpful. I can’t help you out with this unfortunately. The code for doob’s harmony app is on github, too: /mrdoob/harmony

Take it for a spin if you like. Experiment with some of the other brushes. Thanks again to powerhouse Mr Doob for sharing such beautiful work.

(I’ll probably be removing the drawing canvas in a week or so. It’s a bit of a resource hog!)