A page background that looks like handmade paper, a stylised cloud for an illustration, a light film grain over a photo: these textures need no downloaded image, they are calculated.
<feTurbulence> generates procedural noise directly in the browser, from a mathematical formula rather than a file, which keeps the texture crisp at any screen size.
Definition
<feTurbulence> is an SVG filter primitive that generates a computed noise image with no input source: unlike most other primitives, it takes nothing through in, it builds its own texture from its attributes.
The result can be used on its own, as a background, or feed into another primitive such as <feDisplacementMap> to warp a nearby shape.
Main attributes
| Attribute | Role | Typical values |
|---|---|---|
type | Noise style | fractalNoise or turbulence |
baseFrequency | Pattern density | From 0.005 (large grain) to 0.9 (fine grain) |
numOctaves | Number of stacked detail layers | 1 to 6, often 2 to 4 |
seed | Starting point of the random calculation | Any integer |
Two calls to <feTurbulence> with the same seed and the same attributes produce exactly the same pattern, which keeps the result reproducible despite its random-looking appearance.
Concrete rendering example
The example below compares both values of type on two neighbouring rectangles: fractalNoise gives a soft grain close to textured paper, turbulence gives sharper, more contrasted patterns close to smoke or marble.
<svg viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="paper">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" />
</filter>
<filter id="smoke">
<feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="3" />
</filter>
</defs>
<rect x="10" y="10" width="100" height="100" rx="8" filter="url(#paper)" />
<rect x="130" y="10" width="100" height="100" rx="8" filter="url(#smoke)" />
</svg>Neither area uses an external image: the whole pattern is recalculated by the browser from two different settings of <feTurbulence>.
Difference from a similar element
<feTurbulence> is sometimes mixed up with <feDisplacementMap>, even though their roles are complementary rather than equivalent: <feTurbulence> generates a texture from nothing, while <feDisplacementMap> uses an existing image, often this very noise, to warp another shape.
Common pitfall
<feTurbulence> is one of the most expensive primitives to compute: applied over a large area, with a high numOctaves, it can visibly slow down page scrolling or make an animation stutter. On a full-width banner, it is better to generate the texture once and export it as an image, keeping <feTurbulence> for small or static areas.
Real-world use case
Believemy, like most sites that use it, keeps <feTurbulence> for targeted areas: a kraft-paper card background, a stylised cloud in an educational illustration, a light grain added to a photo to break up a too-smooth render, or a displacement map for a logo that seems to float underwater. In every case, the noise stays purely decorative and never competes with the text it sits behind.
- Textured paper or fabric background
- Stylised cloud or smoke in an illustration
- Light film grain added to a photo
- Base texture for a displacement-map warp
- Subtle backdrop pattern behind a heading, to avoid a flat block of plain colour
FAQ
fractalNoise and turbulence?fractalNoise produces soft, continuous noise close to paper or fabric, while turbulence adds an absolute value to the calculation that creates sharper, more contrasted patterns close to smoke or veined marble.
The Perlin noise algorithm the specification relies on leaves rendering engines a small margin of interpretation, so two browsers with the same seed can produce a very similar pattern but never a pixel-perfect match.
feTurbulence be animated?Yes, by animating the baseFrequency attribute with <animate>, which makes the pattern evolve over time for a moving smoke or water effect, at the cost of a repeated calculation on every frame worth watching on mobile devices with a smaller battery budget.