"<feTurbulence>"

<feTurbulence> generates a procedural noise pattern using the Perlin turbulence algorithm.

It's the underlying primitive for paper textures, cloud effects, marbling, water distortions, and pseudo-random fills. Unlike a bitmap, the noise is computed per pixel at render time, so it scales losslessly to any resolution.

<feTurbulence> takes no input image. It simply fills the filter primitive subregion with computed noise values, which downstream primitives (like "<feDisplacementMap>" or "<feComposite>") can then use as a texture, distortion field, or mask.

• DOM object: SVGFETurbulenceElement
• SVG2 spec: https://www.w3.org/TR/filter-effects/#feTurbulenceElement

baseFrequency — the scale of noise features

Controls how "zoomed in" the noise is. Lower values produce larger blobs; higher values produce finer grain. You can specify one number (same for X and Y) or two (separate X and Y frequencies, allowing stretched noise).

numOctaves — how many layers of detail

Each octave adds a finer layer of noise on top of the previous one. More octaves produces richer, more natural-looking texture at the cost of more computation per pixel.

type — turbulence vs fractalNoise

The two supported noise types have a visibly different character:

• turbulence takes the absolute value of Perlin noise, producing sharper, cloudier, more contrasted patterns — good for marble, fire, smoke.
• fractalNoise leaves the signed noise alone and remaps it to [0, 1], producing softer, more balanced patterns — good for clouds, paper, organic textures.

seed — choosing a different random pattern

Same frequency and octaves, different seed. The structure is identical but the specific pattern of light and dark changes — use this when two identical noises would look too repetitive, or to pick a pattern you like:

stitchTiles — tileable noise

Normally the noise doesn't line up at the edges of the primitive subregion, so if you tile it you can see seams. Setting stitchTiles="stitch" adjusts the frequency slightly so the pattern matches up at the edges, producing seamlessly tileable noise:

Practical example: watery distortion on text

Combine <feTurbulence> with <feDisplacementMap> to push the source graphic's pixels around according to the noise values. The result is a classic "watery ripple" distortion. The scale attribute on the displacement map controls how strong the push is:

<filter id="Ripples">
  <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="2" seed="5" result="noise" />
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="12" />
</filter>
<text filter="url(#Ripples)">Ripples</text>

Attributes

Attribute	Default	Description
baseFrequency	0	Noise scale. One or two numbers (fx or fx fy). Lower = larger features.
numOctaves	1	Number of detail layers summed together. Higher = finer structure and more cost.
seed	0	Integer seed for the pseudo-random generator. Changes the pattern without changing its structure.
stitchTiles	noStitch	Either noStitch or stitch. stitch produces a seamlessly tileable result.
type	turbulence	Either turbulence (sharper, cloudier) or fractalNoise (softer).

Inherits standard filter primitive attributes (in, result, x, y, width, height) from donner::svg::SVGFilterPrimitiveStandardAttributes.