Rough CSS borders with SVG filters feTurbulence and feDisplacementMap
Here's a really cool technique from Daniel Jones that uses the feTurbulence and feDisplacementMap filters in SVGs to create rough borders:
How to make rough edges with CSS and SVGs
Ever wanted to add some rad rough edges to your HTML elements? This quick tip guide has you covered, we utilise CSS filters and SVG’s to create a re-usable utility class.
Here's a quick Codepen that I made for a proof of concept for a client project:
You can find out more about the filters on MDN:
<feDisplacementMap> - SVG: Scalable Vector Graphics | MDN
The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from in2 to spatially displace the image from in.
<feTurbulence> - SVG: Scalable Vector Graphics | MDN
The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.
For a more in depth look at how you can use SVG filters, check out this excellent article that Sara Soueidan wrote for Codrops:
SVG Filter Effects: Creating Texture with <feTurbulence> | Codrops
feTurbulence is one of the most powerful SVG filter primitives. The specification defines this primitive as follows: Thi
Sara Soueidan