# SVG feTurbulence: filtri per rumore, grana e texture

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

Una sola primitiva di filtro crea quasi ogni texture del web: la grana su un gradiente, la carta dietro una card, un’ondulazione su un bordo. Ecco cosa fa ogni attributo, con ricette che funzionano.

## The short version

- SVG feTurbulence è una primitiva di filtro che genera rumore di Perlin, utilizzabile come grana, carta, nuvole o sorgente di spostamento.
- L’attributo baseFrequency imposta la dimensione del rumore: valori alti, intorno a 0,6 e 0,9, danno una grana fine, mentre valori bassi, intorno a 0,01 e 0,05, danno nuvole ampie e morbide.
- type="fractalNoise" produce un rumore morbido e uniforme adatto a grana e carta, mentre type="turbulence" produce un rumore più netto e increspato adatto a marmo e acqua.
- Una piccola tessera di rumore con stitchTiles="stitch", stesa su un gradiente a bassa opacità, aggiunge texture e nasconde il banding a costo minimo.
- feTurbulence è costoso da calcolare su aree grandi, quindi renderizzalo una volta come tessera invece di animarlo a schermo intero.

**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](https://gradiently.design/it/guide/grainy-gradients), parte da qui.

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

Il minimo: un filtro che crea rumore, applicato a un rettangolo. L’output è statico multicolore finché non togli il colore.

## Che cosa fa ogni attributo di feTurbulence

| Attributo | Valori | Effetto |
| --- | --- | --- |
| `type` | `turbulence` (predefinito) o `fractalNoise` | Increspato e netto, oppure morbido e uniforme |
| `baseFrequency` | Un numero, oppure due per x e y | Più piccolo significa dettagli più grandi |
| `numOctaves` | Numero intero, predefinito 1 | Strati di dettaglio più fine; costa velocità |
| `seed` | Qualsiasi numero, predefinito 0 | Un diverso schema casuale |
| `stitchTiles` | `noStitch` (predefinito) o `stitch` | Smussa i bordi perché le tessere si ripetano senza giunture |

I cinque attributi. Cambiane uno alla volta mentre regoli, perché interagiscono.

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

| baseFrequency | Sembra | Uso |
| --- | --- | --- |
| 0,8 a 0,9 | Grana fine da pellicola | Sovrapposizione su gradienti e foto |
| 0,5 a 0,7 | Grana visibile, risograph | Poster, pagine editoriali |
| 0,15 a 0,3 | Puntinatura grossa, cemento | Sfondi, pietra |
| 0,02 a 0,05 | Nuvole, fumo | Fibre di carta, luce morbida |
| 0,005 a 0,01 | Onde ampie e lente | Spostamento, marmo |

Punti di partenza per una tessera larga circa 300 pixel. Il rumore scala con l’SVG, quindi una tessera disegnata più grande appare più grossolana.

### type="fractalNoise"

- Morbido, simile a nuvole, ben distribuito
- Ottimo per grana, carta e nebbia
- La scelta abituale per le sovrapposizioni

### type="turbulence"

- Più netto, con pieghe scure
- Ottimo per marmo, fuoco e acqua
- Sembra confuso come sovrapposizione a tutto campo

## 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à.

```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 con saturate 0 rende grigio il rumore. Impostare la regione del filtro sull’intero rettangolo evita un bordo sfumato.

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

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

Le modalità di fusione overlay e soft light mantengono il colore del gradiente e aggiungono solo texture. Parti da un’opacità tra 0,08 e 0,15 e giudica a schermo intero.

Il fondo sotto la grana: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

I gradienti viola scuro come questo sono quelli in cui il banding si vede di più, ed è proprio lì che la grana si guadagna il posto. La causa è spiegata meglio nel [banding dei gradienti](https://gradiently.design/it/guide/gradient-banding).

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

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

Aumenta surfaceScale per un foglio più ruvido; abbassa elevation per una luce radente che esalta ogni fibra.

Abbinala a fondi caldi bianco sporco. Gli [sfondi con texture di carta](https://gradiently.design/it/guide/paper-texture-background) 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.

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

Una scala da 4 a 12 sembra fatta a mano. Oltre 30 la sorgente diventa irriconoscibile. Cambia seed per ottenere un’ondulazione diversa.

> **Il testo resta testo** Il testo SVG filtrato è ancora testo vero, quindi si può selezionare e viene letto dagli screen reader. Tieni le deformazioni lievi su tutto ciò che le persone devono leggere.

## 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. **Usa le tessere** Renderizza il rumore in un piccolo SVG con `stitchTiles="stitch"` e ripetilo come immagine di sfondo.
2. **Tieni basse le ottave** `numOctaves` sopra 4 raramente aggiunge dettaglio visibile alle dimensioni di una grana e costa ogni volta.
3. **Evita di animarlo** Animare `baseFrequency` o `seed` forza un ricalcolo completo a ogni fotogramma. Sposta invece una tessera statica con una trasformazione.
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](https://gradiently.design/it/guide/dark-mode-gradients).

Per una versione solo CSS della stessa idea, vedi la [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture). 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.

Un poster verticale con uno sfondo a gradiente profondo e una fine texture granulosa dietro un titolo breve

Un Mark con la grana integrata nella superficie. Il rumore fa parte della ricetta, quindi mantiene la stessa scala a ogni dimensione.

## FAQ

### Che cosa fa feTurbulence in SVG?

Genera rumore di Perlin dentro un filtro SVG. Puoi mostrare il rumore direttamente come texture oppure passarlo ad altre primitive come feColorMatrix, feDiffuseLighting o feDisplacementMap.

### Quale baseFrequency devo usare per la grana?

Prova da 0,7 a 0,9 con type fractalNoise e tre ottave per una grana fine da pellicola. Valori più bassi creano dettagli più grandi e morbidi.

### Qual è la differenza tra fractalNoise e turbulence?

fractalNoise è morbido e uniforme, ottimo per grana e carta. turbulence ha pieghe più nette e si adatta a effetti di marmo, fuoco o acqua.

### Perché il mio rumore SVG ha giunture visibili quando viene ripetuto?

Imposta `stitchTiles="stitch"` su feTurbulence e imposta la regione del filtro sull’intera tessera con x, y, width e height, così i bordi combaciano e non compare un bordo sfumato.

### feTurbulence è lento?

Può esserlo su aree grandi o quando è animato, perché ricalcola il rumore a ogni ridisegno. Una piccola tessera statica ripetuta come sfondo costa poco.