SVG feTurbulence: filtri per rumore, grana e texture

SVG feTurbulence è una primitiva di filtro che riempie la sua regione di rumore di Perlin. Da solo il risultato è un campo di statico colorato; combinato con altre primitive diventa grana da pellicola, fibra di carta, nuvole, marmo o una sorgente per deformare le forme. Lo controlli con cinque attributi: type, baseFrequency, numOctaves, seed e stitchTiles. La maggior parte delle texture dei siti moderni, compresa la grana dei gradienti granulosi, parte da qui.

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

Che cosa fa ogni attributo di feTurbulence

baseFrequency è quello che toccherai di più. Si misura in cicli per unità utente, quindi 0.8 ammassa i dettagli e 0.02 li allunga in lente nuvole. Due valori, come baseFrequency="0.01 0.3", stirano il rumore lungo un asse, ed è così che si simulano il metallo spazzolato e la venatura del legno.

Ricetta: grana su un gradiente

La cosa più utile che fa feTurbulence è aggiungere grana. Un gradiente digitale pulito mostra il banding in strisce visibili, soprattutto se scuro; un rumore leggero spezza quelle strisce e fa sembrare la superficie stampata. I passaggi: crea il rumore, togli il colore, poi stendilo sul gradiente a bassa 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>

Salvalo come grain.svg o incorporalo come data URI, poi ripetilo in un pseudo elemento sopra il gradiente.

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

Ricetta: texture di carta

La carta è rumore a bassa frequenza trasformato in rilievo da una sorgente di luce. feDiffuseLighting tratta il rumore come una mappa di altezza e lo illumina da un lato, producendo le morbide colline di un foglio di carta di cotone.

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

Abbinala a fondi caldi bianco sporco. Gli sfondi con texture di carta hanno palette adatte.

Ricetta: bordi deformati con feDisplacementMap

Il rumore può anche spostare i pixel. feDisplacementMap legge il rumore e sposta ogni pixel della sorgente fino a scale unità, ottenendo linee disegnate a mano, testo che si scioglie e acqua increspata.

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

Prestazioni e comportamento dei browser

feTurbulence funziona in tutti i browser attuali, ma in molti viene calcolato sulla CPU e il suo costo cresce con l’area e con le ottave. Una tessera di 240 pixel si calcola una volta e si ripete, il che costa poco. Un filtro a schermo intero su un elemento attivo viene ricalcolato a ogni ridisegno, il che può essere lento sui telefoni.

1. 1

   Usa le tessere

   Renderizza il rumore in un piccolo SVG con stitchTiles="stitch" e ripetilo come immagine di sfondo.

2. 2

   Tieni basse le ottave

   numOctaves sopra 4 raramente aggiunge dettaglio visibile alle dimensioni di una grana e costa ogni volta.

3. 3

   Evita di animarlo

   Animare baseFrequency o seed forza un ricalcolo completo a ogni fotogramma. Sposta invece una tessera statica con una trasformazione.

4. 4

   Controlla entrambi i temi

   Una grana che sta bene sullo scuro può sembrare sporca sul chiaro. Regola l’opacità per ogni tema, come nei gradienti per la modalità scura.

Per una versione solo CSS della stessa idea, vedi la texture di rumore in CSS. E se vuoi la grana senza regolare alcun filtro, ogni Mark di Gradiently porta con sé grana e materiale nella sua ricetta, resi dal vivo a qualsiasi dimensione tu progetti.