SVG Filter Effects: Creating Texture with | Codrops

Comments Feed" href="https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/feed/" />

| Codrops">

Ready to become a GSAP expert? Access the world’s most comprehensive GSAP training with 300+ lessons. Enroll now →

feTurbulence is one of the most powerful SVG filter primitives. The specification defines this primitive as follows:

This 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 this filter primitive.

In other words, the feTurbulence filter primitive generates and renders Perlin noise. This kind of noise is useful in simulating several natural phenomena like clouds, fire and smoke, and in generating complex texture like marble or granite. And like feFlood, feTurbulence fills the filter region with new content.

This article is part of a series on SVG Filter effects. Check out the other articles in the series:

SVG Filters 101

Outline Text with

Poster Image Effect with

Duotone Images with

Conforming Text to Surface Texture with

Creating Texture with (this article)

SVG Filter Effects: Moving Forward

In this article, we’re going to go over how we can create noise with feTurbulence and how that noise can be used to distort images and text, much like we did with the feDisplacementMap texture in the previous article. Then, we’re going to see how the generated noise can be used in combination with SVG lighting effects to create a simple rough paper texture.

But first, let’s get an overview of feTurbulence and its attributes and see how each one affects the generated noise.

Creating Turbulence and Fractal Noise with feTurbulence

When I set out to write this series, I made the decision to avoid the gnarly technical details behind filter primitives as much as possible. This is why we won’t get into the technical details behind the functions used to generate Perlin noise.

After reading up on the function underlying noise generation, I found that it didn’t help me at all when I put the primitive into experimentation. After all, we are working with a random noise generator here. So, most of the times, you’ll find that generating texture will be a matter of experimenting and tweaking until you get the desired result. With time, it gets a little easier to predict what a texture might look like.

I’ve found that playing with feTurbulence and tweaking its attributes visually was the best way to learn about them and has helped me understand what each of the attributes does. So, we will be taking a visual approach to understanding feTurbulence, with a few interactive demos to help.

Now, feTurbulence generates noise using the Perlin Turbulence function. It has 5 main attributes that control the function and therefore the visual result of that function:

type

baseFrequency

numOctaves

seed

stitchTiles

We’ll go over how each of these attributes affects the visual result without going into the technical details of the function. You’ll find that, most of the times, you’ll only need to worry about three of these attributes: type, baseFrequency and numOctaves.

baseFrequency

In order to generate noise, only the baseFrequency attribute is required. The baseFrequency affects the size (or scale) and the grain of the generated noise.

baseFrequency’s effect is best understood when it is visualized and animated. That’s why I created the following live demo. Using the slider, you can change the value of the base frequency used and see how it affects the generated noise in real-time. You’ll notice that as you increase or decrease the value of the baseFrequency attribute, the generated pattern remains intact as it becomes smaller or larger , respectively, and looks like it’s zooming in and out of its origin at the top left corner .

See the Pen feTurbluence: baseFrequency by Sara Soueidan (@SaraSoueidan) on CodePen.

Lower baseFrequency values (such as 0.001) generate larger patterns, while higher values (0.5+) produce smaller patterns. The values start from 0 (no frequency == no pattern) and up. Negative values are not allowed. as Michael Mullany mentions, “values in the 0.02 to 0.2 range are useful starting points for most textures.”

Note that the noise generated does not have a background color. Meaning that, if you remove the white background color on the SVG, you’ll be able to see the dark body’s background through the noise.

The baseFrequency attribute also accepts two values. When you provide two values, the first one will be used for the base frequency on the x-axis and the second one will correspond to the y-axis. By providing two different values, you can generate vertical or horizontal noise that can be used to achieve some fantastic effects, as we’re going to see in a following section.

Play with the values of the baseFrequency again in this...