SVG Filters - Clickjacking 2.0

This is wild. Great work… and maybe see you at c3 :)

Well that's a new blog to add to my RSS feed! As per usual, any blog with cursed CSS ends up having the best possible content.

When it comes to making esoteric UI in a web browser, I trust you with my life.

I was confused by this bit:

)]}'
[[1337],[1,"AIzaSyAtbm8sIHRoaXMgaXNuJ3QgcmVhbCBsb2w",0,"a",30],[768972,768973,768932,768984,768972,768969,768982,768969,768932,768958,768951],[105,1752133733,7958389,435644166009,7628901,32481100117144691,28526,28025,1651273575,15411]]

In an amusing twist of inaccessibility, the source and accessibility tree clarify that it’s art:

<art-frame … aria-label="an API response made to look like one from Google's services" …>

The base64 string (AIza⸺) is ␀ŒÚK -no, this isn't real lol.

---

As for the hover effect on the “it feels awesome to discover something like this” paragraph, I was thinking in an SVG filters way and built up a whole implementation in my head before peeking (feDisplacementMap of course, but achieving the transition by smuggling a transitioned colour change in the hover effect and spreading it with feTile and stretching the x/y channels based on it with feColorMatrix since you can’t just transition the feDisplacementMap.scale attribute)… but when I actually went and looked, it’s just a pile of dodgy/cunning CSS 2D scale transforms. I guess that works too, largely better, even if it’s more boring.

I confess I was also expecting to find <ruby> in the decorations around the word “awesome”. Ah well, can’t win ’em all. Lots of other top-notch, high-effort frivolity in the post.