# SVG feTurbulence: ruis-, korrel- en texturfilters

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

Eén filterprimitief maakt bijna elke textuur op het web: korrel over een kleurverloop, papier achter een kaart, een trilling op een rand. Dit doet elk attribuut, met recepten die werken.

## The short version

- SVG feTurbulence is een filterprimitief dat Perlin-ruis genereert, dat je kunt gebruiken als korrel, papier, wolken of als bron voor verplaatsing.
- Het attribuut baseFrequency bepaalt de grootte van de ruis: hoge waarden rond 0,6 tot 0,9 geven fijne korrel en lage waarden rond 0,01 tot 0,05 grote, zachte wolken.
- type="fractalNoise" maakt zachte, gelijkmatige ruis die past bij korrel en papier, terwijl type="turbulence" scherpere, rimpelige ruis maakt die past bij marmer en water.
- Een kleine ruistegel met stitchTiles="stitch", met lage dekking over een kleurverloop gelegd, voegt textuur toe en verbergt banding tegen heel lage kosten.
- feTurbulence is duur om over grote vlakken te berekenen, dus render het één keer als tegel in plaats van het schermvullend te animeren.

**SVG feTurbulence** is een filterprimitief dat zijn gebied vult met Perlin-ruis. Op zichzelf is het resultaat een veld van gekleurde statische ruis; gecombineerd met andere primitieven wordt het filmkorrel, papiervezel, wolken, marmer of een bron om vormen te vervormen. Je stuurt het met vijf attributen: `type`, `baseFrequency`, `numOctaves`, `seed` en `stitchTiles`. De meeste texturen op moderne websites, waaronder de korrel van [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients), beginnen hier.

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

Het minimum: een filter dat ruis maakt, toegepast op een rechthoek. De uitvoer is veelkleurige statische ruis tot je de kleur verwijdert.

## Wat elk feTurbulence-attribuut doet

| Attribuut | Waarden | Effect |
| --- | --- | --- |
| `type` | `turbulence` (standaard) of `fractalNoise` | Rimpelig en scherp, of zacht en gelijkmatig |
| `baseFrequency` | Eén getal, of twee voor x en y | Kleiner betekent grotere kenmerken |
| `numOctaves` | Geheel getal, standaard 1 | Lagen van fijner detail; kost snelheid |
| `seed` | Elk getal, standaard 0 | Een ander willekeurig patroon |
| `stitchTiles` | `noStitch` (standaard) of `stitch` | Maakt randen glad zodat tegels schoon herhalen |

De vijf attributen. Verander er tijdens het afstemmen steeds één, omdat ze op elkaar inwerken.

`baseFrequency` is degene die je het meest aanraakt. Hij wordt gemeten in cycli per gebruikerseenheid, dus `0.8` pakt kenmerken dicht op elkaar en `0.02` rekt ze uit tot trage wolken. Twee waarden, zoals `baseFrequency="0.01 0.3"`, rekken de ruis uit langs één as, waarmee geborsteld metaal en houtnerf worden nagebootst.

| baseFrequency | Ziet eruit als | Gebruik |
| --- | --- | --- |
| 0,8 tot 0,9 | Fijne filmkorrel | Overlay op kleurverlopen en foto’s |
| 0,5 tot 0,7 | Zichtbare korrel, risograaf | Posters, redactionele pagina’s |
| 0,15 tot 0,3 | Grove spikkels, beton | Achtergronden, steen |
| 0,02 tot 0,05 | Wolken, rook | Papiervezels, zacht licht |
| 0,005 tot 0,01 | Grote trage golven | Verplaatsing, marmer |

Beginpunten voor een tegel van ongeveer 300 pixels breed. Ruis schaalt mee met de SVG, dus een groter getekende tegel ziet er grover uit.

### type="fractalNoise"

- Zacht, wolkachtig, gelijkmatig verspreid
- Goed voor korrel, papier en mist
- De gebruikelijke keuze voor overlays

### type="turbulence"

- Scherper met donkere plooien
- Goed voor marmer, vuur en water
- Ziet er druk uit als volledige overlay

## Recept: korrel over een kleurverloop

Het nuttigste wat feTurbulence doet is korrel toevoegen. Een schoon digitaal kleurverloop vertoont banding in zichtbare strepen, vooral donkere; lichte ruis breekt die strepen op en laat het vlak gedrukt aanvoelen. De stappen: maak de ruis, strip de kleur en leg hem met lage sterkte over het kleurverloop.

```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 met saturate 0 maakt de ruis grijs. Het filtergebied op de volledige rechthoek zetten voorkomt een zachte rand.

Sla dat op als `grain.svg` of voeg het inline in als data-URI en tegel het dan in een pseudo-element boven het kleurverloop.

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

De overvloei- en zachtlicht-mengmodi behouden de kleur van het kleurverloop en voegen alleen textuur toe. Begin bij 0,08 tot 0,15 dekking en beoordeel het schermvullend.

De ondergrond onder de korrel: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

Donkere violette kleurverlopen als deze zijn waar banding het sterkst opvalt, en precies daar verdient korrel zijn plek. Meer over de oorzaak in [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding).

## Recept: papiertextuur

Papier is laagfrequente ruis die door een lichtbron in reliëf wordt omgezet. `feDiffuseLighting` behandelt de ruis als hoogtekaart en belicht hem van één kant, wat de zachte heuvels van een vel katoenpapier oplevert.

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

Verhoog surfaceScale voor een ruwer vel; verlaag elevation voor een strijklicht dat elke vezel overdrijft.

Combineer het met warme gebroken witte ondergronden. [Achtergronden met papiertextuur](https://gradiently.design/nl/guide/paper-texture-background) heeft paletten die erbij passen.

## Recept: vervormde randen met feDisplacementMap

Ruis kan ook pixels verplaatsen. `feDisplacementMap` leest de ruis en verschuift elke pixel van de bron met maximaal `scale` eenheden, wat handgetekende lijnen, smeltende tekst en rimpelend water oplevert.

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

Een scale van 4 tot 12 leest als handgemaakt. Voorbij 30 wordt de bron onherkenbaar. Verander seed voor een andere trilling.

> **Tekst blijft tekst** Gefilterde SVG-tekst blijft echte tekst, dus hij kan worden geselecteerd en door schermlezers worden voorgelezen. Houd vervormingen subtiel bij alles wat mensen moeten lezen.

## Prestaties en gedrag per browser

feTurbulence werkt in elke huidige browser, maar wordt in veel ervan op de cpu berekend en de kosten groeien met oppervlak en octaven. Een tegel van 240 pixels wordt één keer berekend en herhaald, wat goedkoop is. Een schermvullend filter op een live element wordt opnieuw berekend telkens als het element opnieuw wordt getekend, wat op telefoons traag kan zijn.

1. **Tegel het** Render ruis in een kleine SVG met `stitchTiles="stitch"` en herhaal hem als achtergrondafbeelding.
2. **Houd octaven laag** `numOctaves` boven 4 voegt zelden zichtbaar detail toe bij korrelgroottes en kost elke keer rekenkracht.
3. **Vermijd animeren** Het animeren van `baseFrequency` of `seed` dwingt elk frame een volledige herberekening af. Verschuif in plaats daarvan een statische tegel met een transform.
4. **Controleer beide thema’s** Korrel die er op donker goed uitziet, kan er op licht vuil uitzien. Stem de dekking per thema af, zoals in [kleurverlopen voor donkere modus](https://gradiently.design/nl/guide/dark-mode-gradients).

Voor een aanpak met alleen css van hetzelfde idee zie [css-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture). En als je korrel wilt zonder filters af te stemmen, heeft elke Gradiently Mark zijn eigen korrel en materiaal als onderdeel van zijn recept, live gerenderd op elk formaat waarin je ontwerpt.

Een staande poster met een diepe kleurverloopachtergrond en een fijne korreltextuur achter een korte kop

Een Mark met korrel ingebouwd in zijn oppervlak. De ruis is onderdeel van het recept, dus hij blijft op elk formaat even groot.

## FAQ

### Wat doet feTurbulence in SVG?

Het genereert Perlin-ruis in een SVG-filter. Je kunt de ruis rechtstreeks als textuur tonen of voeden aan andere primitieven zoals feColorMatrix, feDiffuseLighting of feDisplacementMap.

### Welke baseFrequency moet ik gebruiken voor korrel?

Probeer 0,7 tot 0,9 met type fractalNoise en drie octaven voor fijne filmkorrel. Lagere waarden maken grotere, zachtere kenmerken.

### Wat is het verschil tussen fractalNoise en turbulence?

fractalNoise is zacht en gelijkmatig, goed voor korrel en papier. turbulence heeft scherpere plooien en past bij marmer-, vuur- of watereffecten.

### Waarom heeft mijn SVG-ruis zichtbare naden als ik hem tegel?

Zet `stitchTiles="stitch"` op feTurbulence en zet het filtergebied op de volledige tegel met x, y, width en height, zodat randen aansluiten en er geen zachte rand verschijnt.

### Is feTurbulence traag?

Het kan dat zijn op grote vlakken of bij animatie, omdat de ruis bij elke herschildering opnieuw wordt berekend. Een kleine statische tegel die als achtergrond wordt herhaald, is goedkoop.