Hack my Logo

[bryanbraun]

This issue is just for fun.

The logo at the top of each page looks like a normal image, but hovering or clicking on it results in some fun interactions, like these:

Currently, whenever a page loads, a new "logo hack" is randomly chosen. I want to add more variations.

The task

Create a new logo hack, using any interaction (click, hover, touch, focus, keyboard, etc.), with any type of effect (color, audio, animation, physics, etc.). Pretty much anything goes, as long as it uses the same base image and the logo looks normal on page load (i.e. it doesn't do anything unless you interact specifically with it).

Details

The logo is an inline SVG. Hacking it means creating a Javascript file that tells the SVG what to do. Existing examples are here. For development and testing, use the /logo-dev url.

---

Update:

Here are the hacks people have already created:

• Create logo2.html #10, by @Krazete
• Created 3 new logo variants #13, by @davidbru