A while ago I got obsessed with the possibilities of using SVG filters to manipulate and distort elements in real-time on the web. This resulted in the two silly side projects below.

Under the hood, all of the effects here are a mix of CSS styles and SVG filters.

Browser Extension

I’ve always wanted to pass webpages through a horribly broken photocopier, so I built a browser extension to emulate the experience!

It’s available for Chrome and Firefox. The source is on GitHub.

WordPress Plugin

I built a little WordPress plugin that mimics the effects of a photocopier. It can also distort things, as if you didn’t hold your paper still enough while you made your photocopy. I used examples from this project for my talk at WordCamp US 2021.

The source is available on GitHub.