SVG Filters for the Barba Curata EP Cover

2018-01-13 - posted in: computer-graphics, web-technologies, music,

So I’ve got a new EP out (been keeping this on my shelf for far too long). For the cover image, however, I played around with SVG filters a little. Here’s what I learned.

First things first, here is the music:

So, since all songs carry names of beards, I got a stock vector graphic from shutterstock showing a bearded hipster (so 2014…). However, not quite the aesthetic fitting my alter ego, programmverdichter. So I looked into ways of distorting an SVG and stumbled upon this blog post on codrops introducing a turbulence filter used to displace a button graphic.

Side Note: Take a look at the beautiful complete distorted button demo, and at the source code.

So, let’s see. Here’s a rectangle:

1
2
3
4
5
6
7
8
9
<svg width="200" height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100"
      style="stroke: #aee;
             stroke-width: 3;
             fill: none;"
      />
</svg>  

Let’s try the easiest filter, a gaussian blur:

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="200" height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>  
<rect x="50" y="50" width="100" height="100"
      style="stroke: #aee;
             stroke-width: 3;
             fill: none;"
      filter="url(#blur)"
      />
</svg>  

Alright, that’s nice but not exactly extraordinary. Let’s look at that turbulence I mentioned. This is how it looks like if directly applied to the rect. We can choose between turbulence and fractalNoise for the type attribute, the latter of which is an implementation of Perlin noise.

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="200" height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="displacementFilter">
    <feTurbulence type="turbulence|fractalNoise" baseFrequency="0.02"
        numOctaves="2" result="turbulence"/></filter> 
<rect x="50" y="50" width="100" height="100"
      style="stroke: #aee;
             stroke-width: 3;
             fill: none;"
      filter="url(#displacementFilter)"       
      />
</svg>

Without further ado, let’s use a feDisplacementMap to distort that rectangle. We can further use two values for baseFrequency to use different values for x and y distortion.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<svg width="200" height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="displacementFilter">
    <feTurbulence type="turbulence|fractalNoise" baseFrequency="0.02 0.1"
        numOctaves="2" result="turbulence"/>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic" in2="turbulence" />
</filter> 
<rect x="50" y="50" width="100" height="100"
      style="stroke: #aee;
             stroke-width: 3;
             fill: none;"
      filter="url(#displacementFilter)"       
      />
</svg>

The xChannelSelector and yChannelSelector attributes are used to determine which (color) channel to take the displacement amount in x and y direction from. R and G are an arbitrary choice, could as well have been B and A.

Here are some references for the SVG filter element: