A MAD Fold-In is a piece of artwork on the inside-back cover of each issue of "MAD Magazine". The main image can be folded to reveal a hidden, secondary image.

I wanted to share my interactive picture with others, but printing a fold-in and mailing it to friends with instructions seemed really hard, so I searched for a digital way to do it.

I found a blog post[2] from Thomas Park where he already did 100% of the work necessary to make a MAD Fold-In using nothing but CSS and HTML and a normal PNG image.

Using Inkscape and some Creative Commons images, I drafted a rough piece of artwork and tweaked it until the CSS folded it nicely.

I wouldn't normally share here, but I think other HN readers may get some utility from seeing and trying out a purely CSS implementation of a MAD Fold-In, even if I didn't write the CSS myself. I'm hoping to start a trend where others make their own fold-ins.

Moreover, Elon Musk picked today of all days to rebrand the Twitter logo as a unicode "X" character (𝕏). So, the Twitter bird really _did_ die today, as happened in my MAD fold-in, making my post somewhat topical and weirdly apropos.

If this post is too off-topic, please feel free to take it down. If it stays up, please let me know what you think. In the event my server goes down, I made a WayBack Machine archive of the site [3].

[1] https://en.wikipedia.org/wiki/Mad_Fold-in

[2] https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effec...

[3] https://web.archive.org/web/20230724221700/https://brendenhy...