<p>For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce a new complexity. </p> <p>I know now that a good portion of these problems could be solved with a few lines of SVG. </p> <p>Tl;dr: Take me to the gallery! </p> <p>There is a Filter Primitive in SVG called . It’s special in the sense that it doesn’t need any input image — the filter primitive itself generates an image. It produces so-called Perlin noise which is a type of noise gradient. Perlin noise is heavily used in computer generated graphics for creating all sorts of textures. comes with options to create multiple types of noise textures and millions of variations per type. </p> <p>All of these are generated with . </p> <p>“So what?” you might ask. These textures are certainly noisy, but they also contain hidden patterns which we can uncover by pairing them with other filters! That’s what we’re about to jump into. </p> <p>Creating SVG filters </p> <p>A custom filter typically consists of multiple filter primitives chained together to achieve a desired outcome. In SVG, we can describe these in a declarative way with the element and a number of elements. A declared filter can then be applied on a renderable element — like , , , , etc. — by referencing the filter’s id. The following snippet shows an empty filter identified as coolEffect, and applied on a full width and height .</p>