How to Master SVG’s feTurbulence Filter for Realistic Natural Textures

feTurbulence Parameters

The SVG feTurbulence filter implements Perlin noise and accepts five attributes: baseFrequency (default 0), numOctaves (default 1), seed (default 0), stitchTiles (default noStitch), and type (default turbulence). By tweaking these values you can control the frequency, detail, randomness, tiling continuity, and whether the result is sharp turbulence or smoother fractal noise.

<svg width="500" height="500">
  <filter id='noise'>
    <feTurbulence/>
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)" fill="none"></rect>
</svg>

baseFrequency

When baseFrequency is 0 the filter produces no visible pattern. Small values (e.g., 0.01) generate large, detailed noise, while increasing the value tenfold shrinks the pattern and packs more noise into the same area. The attribute can accept two numbers, which are interpreted as the X and Y frequencies, allowing directional stretching of the noise.

numOctaves

The term “octave” refers to a doubling of frequency, similar to musical octaves. Adding multiple octaves layers higher‑frequency copies of the base noise, enriching detail without changing the overall shape. The filter only accepts positive integers; non‑integer multiples produce irregular results. Visual tests show that beyond six octaves the differences become subtle and hard to perceive.

type

The type attribute switches between turbulence (absolute‑value of the noise, yielding sharp, turbulent patterns) and fractalNoise (adds white noise, producing a smoother, Gaussian‑blurred appearance).

stitchTiles

When multiple elements use the same filter, their edges can appear disjoint. Setting stitchTiles="stitch" forces the noise to tile seamlessly, making adjacent shapes look like parts of a continuous texture.

seed

The seed value initializes the pseudo‑random generator; identical seeds produce identical noise patterns, which is useful for reproducibility.

Practical Uses of feTurbulence

By combining the filter with animation and other SVG effects, you can simulate natural phenomena such as flowing water or paper grain.

Water‑flow Texture

<filter id='turbulence-noise' x='0%' y='0%' width='100%' height='100%'>
  <feTurbulence id="feturbulence" baseFrequency="0.015 0.3">
    <animate id="ani1" attributeName="baseFrequency" dur="15s" from="0.015 0.3" to="0.035 0.5" begin="0s; ani2.end" fill="feeze"/>
    <animate id="ani2" attributeName="baseFrequency" dur="15s" from="0.035 0.5" to="0.015 0.3" begin="ani1.end" fill="freeze"/>
  </feTurbulence>
</filter>

Applying this filter to a static river image with feDisplacementMap creates a convincing animated water surface (see the referenced online example).

Paper Grain Texture

For a dense, subtle grain reminiscent of paper, the following settings work well:

<feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5"/>

Illuminating the result from a 45° angle with a white light source yields a realistic paper‑like appearance.

Conclusion

The feTurbulence filter brings Perlin‑noise generation into the browser, enabling developers to recreate a wide range of natural textures with just a few lines of SVG. Understanding the mathematical basis of the parameters lets you combine the filter with lighting, displacement, and animation to produce countless creative visual effects.