# SVG feTurbulence: filtre for støy, korn og tekstur

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

Én filterprimitiv lager nesten alle teksturer på nettet: korn over en gradient, papir bak et kort, en ujevn kant. Her ser du hva hvert attributt gjør, med oppskrifter som fungerer.

## The short version

- SVG feTurbulence er en filterprimitiv som lager Perlin-støy. Den kan brukes som korn, papir, skyer eller en kilde for forskyvning.
- Attributtet baseFrequency angir størrelsen på støyen. Høye verdier rundt 0,6 til 0,9 gir fine korn, og lave verdier rundt 0,01 til 0,05 gir store, myke skyer.
- type="fractalNoise" lager myk, jevn støy som passer til korn og papir, mens type="turbulence" lager skarpere, bølgete støy som passer til marmor og vann.
- En liten støyflis med stitchTiles="stitch", lagt over en gradient med lav ugjennomsiktighet, tilfører tekstur og skjuler bånddannelse med svært lite ressursbruk.
- feTurbulence krever mye beregning over store områder. Render derfor én flis én gang fremfor å animere filteret over hele skjermen.

**SVG feTurbulence** er en filterprimitiv som fyller området sitt med Perlin-støy. Alene blir resultatet et felt med farget støy. Kombinert med andre primitiver blir det filmkorn, papirfibre, skyer, marmor eller en kilde for å vri former. Du styrer den med fem attributter: `type`, `baseFrequency`, `numOctaves`, `seed` og `stitchTiles`. De fleste teksturer på moderne nettsteder, inkludert kornene i [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients), begynner her.

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

Det enkleste: et filter som lager støy, brukt på et rektangel. Resultatet er flerfarget støy til du fjerner fargen.

## Hva hvert feTurbulence-attributt gjør

| Attributt | Verdier | Effekt |
| --- | --- | --- |
| `type` | `turbulence` (standard) eller `fractalNoise` | Bølgete og skarpt, eller mykt og jevnt |
| `baseFrequency` | Ett tall, eller to for x og y | Lavere verdi gir større strukturer |
| `numOctaves` | Heltall, standard 1 | Lag med finere detaljer, men lavere hastighet |
| `seed` | Et hvilket som helst tall, standard 0 | Et annet tilfeldig mønster |
| `stitchTiles` | `noStitch` (standard) eller `stitch` | Jevner ut kanter slik at fliser gjentas uten skjøter |

De fem attributtene. Endre ett om gangen når du justerer, fordi de påvirker hverandre.

`baseFrequency` er det du kommer til å justere mest. Det måles i sykluser per brukerenhet, så `0.8` pakker strukturene tett sammen, mens `0.02` strekker dem til rolige skyer. To verdier, som `baseFrequency="0.01 0.3"`, strekker støyen langs én akse. Slik etterlignes børstet metall og årringer i tre.

| baseFrequency | Ser ut som | Bruk |
| --- | --- | --- |
| 0,8 til 0,9 | Fine filmkorn | Lag over gradienter og bilder |
| 0,5 til 0,7 | Synlige korn, risografi | Plakater, redaksjonelle sider |
| 0,15 til 0,3 | Grove prikker, betong | Bakgrunner, stein |
| 0,02 til 0,05 | Skyer, røyk | Papirfibre, myk belysning |
| 0,005 til 0,01 | Store, rolige bølger | Forskyvning, marmor |

Utgangspunkter for en flis som er rundt 300 piksler bred. Støyen skaleres med SVG-en, så en flis som vises større, ser grovere ut.

### type="fractalNoise"

- Myk, skyaktig og jevnt fordelt
- Bra til korn, papir og tåke
- Det vanlige valget for overliggende lag

### type="turbulence"

- Skarpere, med mørke folder
- Bra til marmor, ild og vann
- Ser urolig ut som et helt overliggende lag

## Oppskrift: korn over en gradient

Det nyttigste feTurbulence gjør, er å tilføre korn. En ren digital gradient får synlige bånd, særlig i mørke partier. Lett støy bryter opp båndene og får overflaten til å minne om trykk. Fremgangsmåten er å lage støyen, fjerne fargen og deretter legge den svakt over gradienten.

```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 med saturate 0 gjør støyen grå. Sett filterområdet til hele rektangelet for å unngå en myk kant.

Lagre dette som `grain.svg`, eller legg det inn som en data-URI. Gjenta det deretter som fliser i et pseudoelement over gradienten.

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

Blandingsmodusene overlay og soft-light bevarer gradientens farge og tilfører bare tekstur. Begynn med 0,08 til 0,15 i ugjennomsiktighet, og vurder resultatet på hele skjermen.

Bakgrunnen under kornene: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

Mørke fiolette gradienter som denne er der bånddannelse synes best, og nettopp der korn gjør mest nytte. Les mer om årsaken i [bånddannelse i gradienter](https://gradiently.design/nb/guide/gradient-banding).

## Oppskrift: papirtekstur

Papir er lavfrekvent støy som blir til relieff med en lyskilde. `feDiffuseLighting` behandler støyen som et høydekart og belyser den fra én side. Det gir de myke forhøyningene i et ark bomullspapir.

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

Øk surfaceScale for et grovere ark. Senk elevation for et sidelys som fremhever hver fiber.

Kombiner det med varme, brukket hvite bakgrunner. [Bakgrunner med papirtekstur](https://gradiently.design/nb/guide/paper-texture-background) har paletter som passer.

## Oppskrift: vridde kanter med feDisplacementMap

Støy kan også flytte piksler. `feDisplacementMap` leser støyen og forskyver hver piksel i kilden med opptil `scale` enheter. Det gir håndtegnede linjer, smeltende tekst og bølgete vann.

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

En scale-verdi på 4 til 12 virker håndlaget. Over 30 blir kilden ugjenkjennelig. Endre seed for å få en annen ujevnhet.

> **Tekst forblir tekst** Filtrert SVG-tekst er fortsatt ekte tekst, så den kan markeres og leses av skjermlesere. Hold vridningen dempet på alt folk må kunne lese.

## Ytelse og oppførsel i nettlesere

feTurbulence fungerer i alle nåværende nettlesere, men beregnes på CPU-en i mange av dem. Ressursbruken øker med arealet og antallet oktaver. En flis på 240 piksler beregnes én gang og gjentas, noe som krever lite. Et filter over hele skjermen på et levende element beregnes på nytt hver gang elementet tegnes på nytt. Det kan være tregt på mobil.

1. **Bruk fliser** Render støy i en liten SVG med `stitchTiles="stitch"`, og gjenta den som et bakgrunnsbilde.
2. **Hold antallet oktaver lavt** `numOctaves` over 4 tilfører sjelden synlige detaljer i kornstørrelse, men krever ressurser hver gang.
3. **Unngå å animere filteret** Animering av `baseFrequency` eller `seed` tvinger frem en full ny beregning for hvert bilde. Flytt heller en statisk flis med en transformasjon.
4. **Sjekk begge temaene** Korn som ser riktige ut på mørkt, kan se skitne ut på lyst. Juster ugjennomsiktigheten for hvert tema, som i [gradienter i mørk modus](https://gradiently.design/nb/guide/dark-mode-gradients).

For en variant med bare CSS, se [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture). Hvis du vil ha korn uten å justere filtre, har hver Mark fra Gradiently sine egne korn og sitt eget materiale som en del av oppskriften, rendret direkte i størrelsen du designer i.

En stående plakat med dyp gradientbakgrunn og en fin korntekstur bak en kort overskrift

En Mark med korn innebygd i overflaten. Støyen er en del av oppskriften, så den holder samme skala i alle størrelser.

## FAQ

### Hva gjør feTurbulence i SVG?

Den lager Perlin-støy i et SVG-filter. Du kan vise støyen direkte som tekstur eller sende den inn i andre primitiver som feColorMatrix, feDiffuseLighting eller feDisplacementMap.

### Hvilken baseFrequency bør jeg bruke for korn?

Prøv 0,7 til 0,9 med typen fractalNoise og tre oktaver for fine filmkorn. Lavere verdier gir større, mykere strukturer.

### Hva er forskjellen mellom fractalNoise og turbulence?

fractalNoise er myk og jevn, og passer til korn og papir. turbulence har skarpere folder og passer til marmor-, ild- eller vanneffekter.

### Hvorfor får SVG-støyen synlige skjøter når den gjentas som fliser?

Sett `stitchTiles="stitch"` på feTurbulence, og sett filterområdet til hele flisen med x, y, width og height. Da passer kantene sammen, og du unngår en myk kant.

### Er feTurbulence treg?

Den kan være det over store områder eller når den animeres, fordi støyen beregnes på nytt hver gang elementet tegnes på nytt. En liten, statisk flis som gjentas som bakgrunn, krever lite.