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

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, commencent ici.

<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>

Ce que fait chaque attribut de feTurbulence

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.

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é.

<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>

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é.

.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;
}

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.

<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>

Associez-la à des fonds blanc cassé chauds. Les fonds texture papier 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.

<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>

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. 1

   Utilisez une tuile

   Rendez le bruit dans un petit SVG avec stitchTiles="stitch" et répétez-le comme image de fond.

2. 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. 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. 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.

Pour une version en CSS seul de la même idée, voyez la texture de bruit en CSS. 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.