How to Distort Text with SVG Filters

Ya know something I’ve never played with before? SVG filters. Sure, I’ve taken a look at the tutorials and clicked around a few Pens here and there, but I’ve never fully invested in them as I didn’t ever see the point—I’m never going to work on big illustrationy stuff so eh, it’s just not for me. Thankfully however, Henry Desroches has shown just how wrong I am when he wrote this great piece the other day about how to distort text with SVG filters.

This inspired me to experiment with them on my own site after stealing some of Henry’s code and I kind of like it! When you hover over the links on my homepage now, each of them will suddenly look as if they were printed with a blotchy, messed up stamp. Also I updated the main headings on /about, /notes, etc. to use the same stamp effect and I think it looks pretty neat.

I spent a little bit of time animating these SVG filters but it looks like it requires a lot of GSAP magic to get working and eh, I kinda don’t want a ton of javascript just for this one off animation. It would be really neat if I could animate these filter properties with custom CSS properties but after faffing about for 15 mins I bailed and went back to watching Bullet Train.

ANYWAY. Go read Henry’s post because it’s great and reminded me that I shouldn’t just slap a nice font on a website and be done with it. There’s so many design opportunities after a typeface has been chosen and I need to remind myself of that in the future.