How to make rough edges with CSS and SVGs

While finishing up the previous version of this website, back in 2020, I was browsing around for some inspiration and checked out Jack McDade's excellent new Statamic starter kit, Starters Creek. Something immediately jumped out at me: he had added rough edges to the images on the blog.

I had been trying to work out how to achieve this effect for the best part of a couple of weeks, but kept coming up short on Google. My thinking was that I would have to use an SVG image as some form of clipping mask. The issue was that it wouldn't have been very reusable, as it would have been a fixed SVG with specific dimensions.

I set about digging through the source to work out how to achieve this subtle but rad effect. As it turns out, Jack had used a super simple approach, which consisted of adding an SVG filter to the image:

.squiggle {
    filter: url(#squiggle);
}

This filter references an SVG, included just before the closing body tag like so:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0" width="0">
    <defs>
        <filter id="squiggle">
            <feTurbulence type="fractalNoise" id="turbulence" baseFrequency=".05" numOctaves="4" />
            <feDisplacementMap id="displacement" in="SourceGraphic" scale="4" />
        </filter>
    </defs>
</svg>

Why it works

The genius here is that the filter works dynamically on whatever element it is applied to. feTurbulence generates a field of noise, and feDisplacementMap uses that noise to push each pixel of the element a little way off its true position. Raise baseFrequency for tighter wobbles; raise scale for rougher edges. Figure 1 above is running the exact filter from this article.

I used this effect across that version of my website, and my favourite spot was the hover effect on the article cards, where I felt it added a bit more personality. The site has since been redesigned, so the demo in Figure 1 is now the place to see it in action.

I hope this quick tip helped!