# SVG feTurbulence: filtre til støj, korn og tekstur

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

Én filterprimitiv laver næsten alle teksturer på nettet: korn over en gradient, papir bag et kort, en bølgen på en kant. Her er, hvad hver attribut gør, med opskrifter der virker.

## The short version

- SVG feTurbulence er en filterprimitiv, der genererer Perlin-støj, som du kan bruge som korn, papir, skyer eller kilde til forvrængning.
- Attributten baseFrequency bestemmer støjens størrelse: høje værdier omkring 0,6 til 0,9 giver fint korn, og lave værdier omkring 0,01 til 0,05 giver store, bløde skyer.
- type="fractalNoise" laver blød, jævn støj, der passer til korn og papir, mens type="turbulence" laver skarpere, rillet støj, der passer til marmor og vand.
- En lille støjflise med stitchTiles="stitch", lagt over en gradient med lav opacitet, tilføjer tekstur og skjuler banding for meget lidt.
- feTurbulence er dyr at beregne over store flader, så tegn den én gang som en flise i stedet for at animere den i fuld skærm.

**SVG feTurbulence** er en filterprimitiv, der fylder sit område med Perlin-støj. Alene er resultatet et felt af farvet sne; kombineret med andre primitiver bliver det til filmkorn, papirfibre, skyer, marmor eller en kilde til at forvrænge former. Du styrer den med fem attributter: `type`, `baseFrequency`, `numOctaves`, `seed` og `stitchTiles`. De fleste teksturer på moderne hjemmesider, også kornet på [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients), starter 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>
```

Minimummet: et filter, der laver støj, anvendt på et rektangel. Resultatet er flerfarvet sne, indtil du fjerner farven.

## Hvad hver attribut i feTurbulence gør

| Attribut | Værdier | Effekt |
| --- | --- | --- |
| `type` | `turbulence` (standard) eller `fractalNoise` | Rillet og skarp, eller blød og jævn |
| `baseFrequency` | Ét tal, eller to for x og y | Mindre betyder større detaljer |
| `numOctaves` | Heltal, standard 1 | Lag af finere detaljer; koster hastighed |
| `seed` | Et vilkårligt tal, standard 0 | Et andet tilfældigt mønster |
| `stitchTiles` | `noStitch` (standard) eller `stitch` | Udglatter kanter, så fliser gentages rent |

De fem attributter. Ændr én ad gangen, mens du finjusterer, fordi de påvirker hinanden.

`baseFrequency` er den, du vil røre mest ved. Den måles i cyklusser per brugerenhed, så `0.8` pakker detaljerne tæt sammen, og `0.02` strækker dem ud til langsomme skyer. To værdier, som `baseFrequency="0.01 0.3"`, strækker støjen langs én akse, og sådan efterlignes børstet metal og træårer.

| baseFrequency | Ligner | Brug |
| --- | --- | --- |
| 0,8 til 0,9 | Fint filmkorn | Lag over gradienter og fotos |
| 0,5 til 0,7 | Synligt korn, risograf | Plakater, redaktionelle sider |
| 0,15 til 0,3 | Grove pletter, beton | Baggrunde, sten |
| 0,02 til 0,05 | Skyer, røg | Papirfibre, blødt lys |
| 0,005 til 0,01 | Store langsomme bølger | Forvrængning, marmor |

Udgangspunkter for en flise på omkring 300 pixels i bredden. Støjen skalerer med SVG’en, så en flise tegnet større ser grovere ud.

### type="fractalNoise"

- Blød, skyagtig, jævnt fordelt
- God til korn, papir og tåge
- Det sædvanlige valg til lag ovenpå

### type="turbulence"

- Skarpere med mørke folder
- God til marmor, ild og vand
- Ser uroligt ud som lag over det hele

## Opskrift: korn over en gradient

Det mest nyttige, feTurbulence gør, er at tilføje korn. En ren digital gradient får banding med synlige striber, især mørke gradienter; let støj bryder striberne op og får fladen til at føles trykt. Trinene: lav støjen, fjern dens farve, og læg den så over gradienten med lav styrke.

```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 gør støjen grå. Når filterområdet sættes til hele rektanglet, undgår du en blød kant.

Gem den som `grain.svg`, eller indsæt den som data-URI, og gentag den så som flise 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;
}
```

Blandingstilstandene overlay og soft light bevarer gradientens farve og tilføjer kun tekstur. Start ved en opacitet på 0,08 til 0,15, og bedøm den i fuld skærm.

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

Mørkviolette gradienter som denne er der, hvor banding ses mest, og præcis der, hvor korn gør gavn. Mere om årsagen i [banding i gradienter](https://gradiently.design/da/guide/gradient-banding).

## Opskrift: papirtekstur

Papir er lavfrekvent støj, der bliver til relief af en lyskilde. `feDiffuseLighting` behandler støjen som et højdekort og belyser den fra én side, hvilket giver de bløde bakker i et ark bomuldspapir.

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

Hæv surfaceScale for et ruere ark; sænk elevation for et strejflys, der overdriver hver fiber.

Kombinér den med varme råhvide baggrunde. [Baggrunde med papirtekstur](https://gradiently.design/da/guide/paper-texture-background) har paletter, der passer til.

## Opskrift: forvrængede kanter med feDisplacementMap

Støj kan også flytte pixels. `feDisplacementMap` læser støjen og forskyder hver pixel i kilden med op til `scale` enheder, hvilket giver håndtegnede linjer, smeltende tekst og krusninger i vand.

```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 på 4 til 12 virker håndlavet. Over 30 bliver kilden ukendelig. Skift seed for at få en anden bølgen.

> **Tekst forbliver tekst** Filtreret SVG-tekst er stadig rigtig tekst, så den kan markeres og læses af skærmlæsere. Hold forvrængningen diskret på alt, folk skal kunne læse.

## Ydeevne og browseradfærd

feTurbulence virker i alle aktuelle browsere, men den beregnes på CPU’en i mange af dem, og omkostningen vokser med areal og oktaver. En flise på 240 pixels beregnes én gang og gentages, hvilket er billigt. Et filter i fuld skærm på et levende element genberegnes, hver gang elementet tegnes igen, hvilket kan være langsomt på telefoner.

1. **Brug fliser** Tegn støjen i en lille SVG med `stitchTiles="stitch"`, og gentag den som baggrundsbillede.
2. **Hold oktaverne lave** `numOctaves` over 4 tilføjer sjældent synlige detaljer i kornstørrelse og koster hver gang.
3. **Undgå at animere den** Animation af `baseFrequency` eller `seed` tvinger en fuld genberegning i hvert billede. Flyt i stedet en statisk flise med en transform.
4. **Tjek begge temaer** Korn, der ser rigtigt ud på mørkt, kan se beskidt ud på lyst. Justér opaciteten per tema, som i [gradienter til mørk tilstand](https://gradiently.design/da/guide/dark-mode-gradients).

En version af samme idé kun i CSS finder du i [støjtekstur i CSS](https://gradiently.design/da/guide/css-noise-texture). Og vil du have korn helt uden at finjustere filtre, har hver Gradiently Mark sit eget korn og materiale som en del af opskriften, tegnet live i den størrelse, du designer i.

En plakat i portræt med en dyb gradientbaggrund og en fin korntekstur bag en kort overskrift

En Mark med korn bygget ind i overfladen. Støjen er en del af opskriften, så den har samme skala i alle størrelser.

## FAQ

### Hvad gør feTurbulence i SVG?

Den genererer Perlin-støj i et SVG-filter. Du kan vise støjen direkte som tekstur eller sende den videre til andre primitiver som feColorMatrix, feDiffuseLighting eller feDisplacementMap.

### Hvilken baseFrequency skal jeg bruge til korn?

Prøv 0,7 til 0,9 med type fractalNoise og tre oktaver til fint filmkorn. Lavere værdier giver større, blødere detaljer.

### Hvad er forskellen på fractalNoise og turbulence?

fractalNoise er blød og jævn, god til korn og papir. turbulence har skarpere folder og passer til marmor-, ild- eller vandeffekter.

### Hvorfor har min SVG-støj synlige samlinger, når den gentages som fliser?

Sæt `stitchTiles="stitch"` på feTurbulence, og sæt filterområdet til hele flisen med x, y, width og height, så kanterne passer, og der ikke opstår en blød kant.

### Er feTurbulence langsom?

Det kan den være på store flader eller ved animation, fordi den genberegner støjen ved hver gentegning. En lille statisk flise gentaget som baggrund er billig.