# SVG feTurbulence : filtres de bruit, de grain et de texture

[Canonical HTML page](https://gradiently.design/fr/guide/svg-noise-filter)

Une seule primitive de filtre fabrique presque toutes les textures du web : le grain sur un dégradé, le papier derrière une carte, l’ondulation d’un contour. Voici ce que fait chaque attribut, avec des recettes qui marchent.

## The short version

- SVG feTurbulence est une primitive de filtre qui génère un bruit de Perlin, utilisable comme grain, papier, nuages ou source de déplacement.
- L’attribut baseFrequency règle la taille du bruit : des valeurs élevées, autour de 0,6 à 0,9, donnent un grain fin, et des valeurs basses, autour de 0,01 à 0,05, de grands nuages doux.
- type="fractalNoise" produit un bruit doux et régulier adapté au grain et au papier, tandis que type="turbulence" produit un bruit plus net et ondulé adapté au marbre et à l’eau.
- Une petite tuile de bruit avec stitchTiles="stitch", posée sur un dégradé à faible opacité, ajoute de la texture et masque les bandes pour un coût très faible.
- feTurbulence est coûteux à calculer sur de grandes surfaces : rendez-le une fois sous forme de tuile plutôt que de l’animer en plein écran.

**SVG feTurbulence** est une primitive de filtre qui remplit sa zone d’un bruit de Perlin. Seul, le résultat ressemble à de la neige colorée ; combiné à d’autres primitives, il devient grain de film, fibre de papier, nuages, marbre ou source pour déformer des formes. Vous le pilotez avec cinq attributs : `type`, `baseFrequency`, `numOctaves`, `seed` et `stitchTiles`. La plupart des textures des sites modernes, y compris le grain des [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients), commencent ici.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)" />
</svg>
```

Le minimum : un filtre qui produit du bruit, appliqué à un rectangle. Le résultat est une neige multicolore tant que vous n’en retirez pas la couleur.

## Ce que fait chaque attribut de feTurbulence

| Attribut | Valeurs | Effet |
| --- | --- | --- |
| `type` | `turbulence` (par défaut) ou `fractalNoise` | Ondulé et net, ou doux et régulier |
| `baseFrequency` | Un nombre, ou deux pour x et y | Plus petit veut dire motifs plus grands |
| `numOctaves` | Nombre entier, 1 par défaut | Couches de détail plus fin ; coûte en vitesse |
| `seed` | N’importe quel nombre, 0 par défaut | Un autre motif aléatoire |
| `stitchTiles` | `noStitch` (par défaut) ou `stitch` | Lisse les bords pour que les tuiles se répètent proprement |

Les cinq attributs. Changez-en un seul à la fois pendant le réglage, car ils interagissent.

`baseFrequency` est celui que vous toucherez le plus. Il se mesure en cycles par unité utilisateur : `0.8` resserre les motifs, `0.02` les étire en nuages lents. Deux valeurs, comme `baseFrequency="0.01 0.3"`, étirent le bruit sur un axe, et c’est ainsi qu’on imite le métal brossé et le veinage du bois.

| baseFrequency | Ressemble à | Usage |
| --- | --- | --- |
| 0,8 à 0,9 | Grain de film fin | Superposition sur dégradés et photos |
| 0,5 à 0,7 | Grain visible, risographie | Affiches, pages éditoriales |
| 0,15 à 0,3 | Moucheture grossière, béton | Fonds, pierre |
| 0,02 à 0,05 | Nuages, fumée | Fibres de papier, lumière douce |
| 0,005 à 0,01 | Grandes vagues lentes | Déplacement, marbre |

Points de départ pour une tuile d’environ 300 pixels de large. Le bruit suit l’échelle du SVG : une tuile dessinée plus grande paraît plus grossière.

### type="fractalNoise"

- Doux, nuageux, réparti régulièrement
- Bien pour le grain, le papier et le brouillard
- Le choix habituel pour les superpositions

### type="turbulence"

- Plus net, avec des plis sombres
- Bien pour le marbre, le feu et l’eau
- Paraît chargé en superposition complète

## Recette : du grain sur un dégradé

Ce que feTurbulence fait de plus utile, c’est ajouter du grain. Un dégradé numérique propre se découpe en bandes visibles, surtout s’il est sombre ; un léger bruit brise ces bandes et donne à la surface un aspect imprimé. Les étapes : créer le bruit, lui retirer sa couleur, puis le poser sur le dégradé à faible intensité.

```html
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
  <filter id="grain" x="0" y="0" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" result="noise" />
    <feColorMatrix in="noise" type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>
```

feColorMatrix avec saturate à 0 rend le bruit gris. Étendre la zone du filtre à tout le rectangle évite une bordure floue.

Enregistrez-le sous `grain.svg` ou intégrez-le en data URI, puis répétez-le en tuile dans un pseudo-élément au-dessus du dégradé.

```css
.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/grain.svg");
  background-size: 240px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
```

Les modes de fusion overlay et soft-light gardent la couleur du dégradé et n’ajoutent que la texture. Commencez entre 0,08 et 0,15 d’opacité et jugez en plein écran.

Le fond sous le grain: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

C’est sur les dégradés violets sombres comme celui-ci que les bandes se voient le plus, et donc là que le grain mérite sa place. La cause est expliquée dans [les bandes de dégradé](https://gradiently.design/fr/guide/gradient-banding).

## Recette : texture papier

Le papier, c’est un bruit basse fréquence transformé en relief par une source de lumière. `feDiffuseLighting` traite le bruit comme une carte de hauteurs et l’éclaire de côté, ce qui produit les douces collines d’une feuille de papier coton.

```html
<filter id="paper" x="0" y="0" width="100%" height="100%">
  <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise" />
  <feDiffuseLighting in="noise" lighting-color="#f7f1ea" surfaceScale="2" result="lit">
    <feDistantLight azimuth="45" elevation="60" />
  </feDiffuseLighting>
  <feBlend in="SourceGraphic" in2="lit" mode="multiply" />
</filter>
```

Augmentez surfaceScale pour une feuille plus rugueuse ; baissez elevation pour une lumière rasante qui accentue chaque fibre.

Associez-la à des fonds blanc cassé chauds. [Les fonds texture papier](https://gradiently.design/fr/guide/paper-texture-background) proposent des palettes qui lui vont.

## Recette : bords déformés avec feDisplacementMap

Le bruit peut aussi déplacer des pixels. `feDisplacementMap` lit le bruit et décale chaque pixel de la source d’au plus `scale` unités, ce qui donne des traits dessinés à la main, des lettres qui fondent et de l’eau ondulante.

```html
<filter id="wobble">
  <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" seed="3" result="warp" />
  <feDisplacementMap in="SourceGraphic" in2="warp" scale="10" xChannelSelector="R" yChannelSelector="G" />
</filter>

<text x="40" y="120" font-size="96" font-weight="700" filter="url(#wobble)">Wavy</text>
```

Une valeur de scale entre 4 et 12 donne un aspect fait main. Au-delà de 30, la source devient méconnaissable. Changez seed pour obtenir une autre ondulation.

> **Le texte reste du texte** Un texte SVG filtré reste du vrai texte : il peut être sélectionné et lu par les lecteurs d’écran. Gardez des déformations discrètes sur tout ce qui doit être lu.

## Performances et comportement des navigateurs

feTurbulence fonctionne dans tous les navigateurs actuels, mais beaucoup le calculent sur le processeur, et son coût augmente avec la surface et les octaves. Une tuile de 240 pixels est calculée une fois puis répétée, ce qui coûte peu. Un filtre plein écran sur un élément vivant est recalculé à chaque repeint, ce qui peut être lent sur téléphone.

1. **Utilisez une tuile** Rendez le bruit dans un petit SVG avec `stitchTiles="stitch"` et répétez-le comme image de fond.
2. **Gardez peu d’octaves** Au-delà de 4, `numOctaves` ajoute rarement un détail visible à la taille d’un grain, et coûte à chaque fois.
3. **Évitez de l’animer** Animer `baseFrequency` ou `seed` impose un recalcul complet à chaque image. Déplacez plutôt une tuile fixe avec une transformation.
4. **Vérifiez les deux thèmes** Un grain qui paraît juste sur fond sombre peut sembler sale sur fond clair. Réglez l’opacité par thème, comme dans [les dégradés en mode sombre](https://gradiently.design/fr/guide/dark-mode-gradients).

Pour une version en CSS seul de la même idée, voyez [la texture de bruit en CSS](https://gradiently.design/fr/guide/css-noise-texture). Et si vous voulez du grain sans régler le moindre filtre, chaque Mark Gradiently porte son propre grain et sa matière dans sa recette, rendus en direct à la taille que vous créez.

Une affiche verticale avec un fond en dégradé profond et une fine texture de grain derrière un court titre

Un Mark avec le grain intégré à sa surface. Le bruit fait partie de la recette, il garde donc la même échelle à toutes les tailles.

## FAQ

### Que fait feTurbulence en SVG ?

Il génère un bruit de Perlin dans un filtre SVG. Vous pouvez afficher ce bruit directement comme texture ou l’envoyer dans d’autres primitives comme feColorMatrix, feDiffuseLighting ou feDisplacementMap.

### Quelle baseFrequency utiliser pour du grain ?

Essayez 0,7 à 0,9 avec le type fractalNoise et trois octaves pour un grain de film fin. Des valeurs plus basses donnent des motifs plus grands et plus doux.

### Quelle différence entre fractalNoise et turbulence ?

fractalNoise est doux et régulier, bien pour le grain et le papier. turbulence a des plis plus nets et convient aux effets de marbre, de feu ou d’eau.

### Pourquoi mon bruit SVG montre-t-il des raccords visibles en tuile ?

Ajoutez `stitchTiles="stitch"` sur feTurbulence et étendez la zone du filtre à toute la tuile avec x, y, width et height, pour que les bords correspondent et qu’aucune bordure floue n’apparaisse.

### feTurbulence est-il lent ?

Il peut l’être sur de grandes surfaces ou quand il est animé, car il recalcule le bruit à chaque repeint. Une petite tuile fixe répétée en fond coûte peu.