Credits

• Infinite Resolution Eggbug by @nex3
• iPod glyph adapted from Wikimedia Commons, technically copyright Apple but shhh

How the fuck?

Responsive SVGs, my friend! The resizable element’s background image is an SVG which contains a media query which hides all of its contents unless it’s displayed at the full size, which means it’s completely transparent until you resize it to be plugged all the way in! I also centered the element which resizes, which I thought would be cool but actually made my job harder (I had to do some calculations to make the cable work properly) EDIT: I later undid this!

I really, really wanted to do something with click-and-drag whose “result” wound up displaying in full once complete; drag-to-unveil from my previous interactable wasn’t enough

Changelog

• fixed rendering in Mozilla Firefox - apparently it doesn’t like it if you make the root element of an SVG background-image display: none and just makes it entirely white, weird!
• fixed rendering in Safari - apparently the changes necessary to make Firefox work broke Safari! so a happy medium was found
• swapped out base background image PNG for an SVG, as it winds up both smaller in byte size and scales, both up and down, better
• un-centered the resizable div, improving the experience on Firefox (previously you had to drag the cursor twice as far as the div would actually stretch!) and removing the need for the weird calc-based sizing for the dynamic portion of the cable