Psychedelic Snake in CSS

23 Jun 2015

Trippy! Phantogram always puts on a great concert and at the last one I was struck by a black and white animated backdrop of concentric circles giving the illusion of a slithering snake. As a challenge I decided to see if I could recreate this effect in a web browser. After starting out with Snap.svg I realised I could probably do the whole thing in CSS.

The circles are just elements with rounded corners of size 50%. Each uses the same animation, but with a different delay, to get the wiggling effect.

I hadn’t touched CSS transformations before but they are surprisingly powerful (and actually easier to use than Snap.svg in some ways, like looping). The one limitation I ran up against was choosing which dimension to scale against: currently I use the width of the screen, but that means on a portrait screen (e.g. a phone) you get a somewhat zoomed out effect. I don’t think I can fix that without Javascript.

Check it out in tiny form below, or click here to see it big. Tested in Chrome and Firefox; IE seems to align the elements wrong.

RECENT BLOG POSTS

Yesterday I attended my second gamejam, an eight hour event where teams form to work on small games together around some loose themes, which this time were Black & White, Rockets, and Masks.

Read More...

It’s early to say this, and maybe a little crazy, but I can’t help but put Twenty, a simple game from Stephen French, in the same category as Tetris. Not just in the way it plays - though it shares that methodical feeling of clearing a space that transitions to crowded panic - but in how it takes just a single mechanic and a simple interface to create something truly elegant and timeless. Twenty deserves to be played for decades to come, just like Tetris.

Read More...