Sams Teach Yourself SVG in 24 Hours

Creating Textures with feTurbulence

Creating noise, marble, or cloud effects across an image requires using the feTurbulence primitive. feTurbulence creates a texture-like pattern on an object using a variety of custom properties.

Somewhat oddly, feTurbulence has two different functions (specified by the type attribute): turbulence and noise. The turbulence value creates soft, bubble-like patterns that appear as prismatic clouds, whereas fractalNoise creates a randomized dot texture, similar to gravel or snow being tossed across the image.

feTurbulence has three major attributes to determine the result of the effect: type, numOctaves, and baseFrequency. type allows you to choose between the noise and turbulence options, using the respective values ...