# SVG feTurbulence: brus-, korn- och texturfilter

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

En enda filterprimitiv ger nästan varje textur på webben: korn över en gradient, papper bakom ett kort, ett vingel på en kant. Så fungerar varje attribut, med recept som funkar.

## The short version

- SVG feTurbulence är en filterprimitiv som skapar Perlin-brus, och det kan du använda som korn, papper, moln eller som källa för förskjutning.
- Attributet baseFrequency styr brusets storlek: höga värden kring 0,6 till 0,9 ger fint korn och låga värden kring 0,01 till 0,05 ger stora mjuka moln.
- type="fractalNoise" ger mjukt, jämnt brus som passar korn och papper, medan type="turbulence" ger skarpare, böljande brus som passar marmor och vatten.
- En liten bruspanel med stitchTiles="stitch", lagd över en gradient med låg opacitet, ger textur och döljer bandning till en mycket liten kostnad.
- feTurbulence är dyrt att beräkna över stora ytor, så rendera det en gång som en panel i stället för att animera det i helskärm.

**SVG feTurbulence** är en filterprimitiv som fyller sitt område med Perlin-brus. Ensamt blir resultatet ett fält av färgat statiskt brus, men tillsammans med andra primitiver blir det filmkorn, pappersfibrer, moln, marmor eller en källa för att förvrida former. Du styr det med fem attribut: `type`, `baseFrequency`, `numOctaves`, `seed` och `stitchTiles`. De flesta texturer på moderna webbplatser, bland annat kornet i [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients), börjar här.

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

Minimum: ett filter som skapar brus, applicerat på en rektangel. Resultatet är flerfärgat brus tills du tar bort färgen.

## Vad varje feTurbulence-attribut gör

| Attribut | Värden | Effekt |
| --- | --- | --- |
| `type` | `turbulence` (standard) eller `fractalNoise` | Böljande och skarpt, eller mjukt och jämnt |
| `baseFrequency` | Ett tal, eller två för x och y | Lägre värde ger större detaljer |
| `numOctaves` | Heltal, standard 1 | Lager av finare detaljer, kostar prestanda |
| `seed` | Valfritt tal, standard 0 | Ett annat slumpmässigt mönster |
| `stitchTiles` | `noStitch` (standard) eller `stitch` | Jämnar ut kanterna så att paneler upprepas rent |

De fem attributen. Ändra ett i taget medan du justerar, eftersom de påverkar varandra.

`baseFrequency` är det du kommer att röra mest. Det mäts i perioder per användarenhet, så `0.8` packar detaljerna tätt och `0.02` sträcker ut dem till långsamma moln. Två värden, till exempel `baseFrequency="0.01 0.3"`, sträcker ut bruset längs en axel, och så fejkar man borstad metall och träådring.

| baseFrequency | Ser ut som | Användning |
| --- | --- | --- |
| 0,8 till 0,9 | Fint filmkorn | Överlägg på gradienter och foton |
| 0,5 till 0,7 | Synligt korn, riso | Affischer, redaktionella sidor |
| 0,15 till 0,3 | Grov spräcklighet, betong | Bakgrunder, sten |
| 0,02 till 0,05 | Moln, rök | Pappersfibrer, mjukt ljus |
| 0,005 till 0,01 | Stora långsamma vågor | Förskjutning, marmor |

Utgångspunkter för en panel som är cirka 300 pixlar bred. Bruset skalas med SVG:n, så en panel som ritas större ser grövre ut.

### type="fractalNoise"

- Mjukt, molnlikt, jämnt fördelat
- Bra till korn, papper och dimma
- Det vanliga valet för överlägg

### type="turbulence"

- Skarpare med mörka veck
- Bra till marmor, eld och vatten
- Ser rörigt ut som helt överlägg

## Recept: korn över en gradient

Det mest användbara feTurbulence gör är att lägga till korn. En ren digital gradient delas upp i synliga ränder, särskilt mörka, och lätt brus bryter upp de ränderna så att ytan känns tryckt. Stegen: skapa bruset, ta bort dess färg och lägg det över gradienten med låg styrka.

```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 bruset grått. Om du sätter filterområdet till hela rektangeln undviker du en mjuk ram.

Spara det som `grain.svg` eller lägg in det som en data-URI och upprepa det sedan i ett pseudoelement ovanför 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;
}
```

Blandningslägena overlay och soft light behåller gradientens färg och lägger bara till textur. Börja med 0,08 till 0,15 i opacitet och bedöm resultatet i helskärm.

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

Mörkvioletta gradienter som den här är där bandning syns mest, och det är precis där kornet gör nytta. Mer om orsaken i [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding).

## Recept: papperstextur

Papper är lågfrekvent brus som en ljuskälla förvandlar till relief. `feDiffuseLighting` behandlar bruset som en höjdkarta och belyser det från ena sidan, vilket ger de mjuka kullarna på ett ark bomullspapper.

```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öj surfaceScale för ett grövre ark, sänk elevation för ett strykande ljus som överdriver varje fiber.

Para ihop det med varma off-white-bottnar. [Bakgrunder med papperstextur](https://gradiently.design/sv/guide/paper-texture-background) har paletter som passar.

## Recept: förvrängda kanter med feDisplacementMap

Brus kan också flytta pixlar. `feDisplacementMap` läser bruset och förskjuter varje pixel i källan med upp till `scale` enheter, vilket ger handritade linjer, smältande text och böljande vatten.

```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 skala på 4 till 12 ser handgjord ut. Över 30 blir källan oigenkännlig. Ändra seed för att få ett annat vingel.

> **Text förblir text** Filtrerad SVG-text är fortfarande riktig text, så den går att markera och läsas upp av skärmläsare. Håll förvrängningen diskret på allt som folk behöver kunna läsa.

## Prestanda och webbläsarbeteende

feTurbulence fungerar i alla aktuella webbläsare, men beräknas på processorn i många av dem och kostnaden växer med ytan och antalet oktaver. En panel på 240 pixlar beräknas en gång och upprepas, vilket är billigt. Ett helskärmsfilter på ett levande element räknas om varje gång elementet målas om, och det kan gå långsamt på mobiler.

1. **Gör en panel** Rendera bruset i en liten SVG med `stitchTiles="stitch"` och upprepa det som bakgrundsbild.
2. **Håll oktaverna låga** `numOctaves` över 4 ger sällan synliga detaljer i kornstorlek och kostar varje gång.
3. **Undvik att animera det** Om du animerar `baseFrequency` eller `seed` tvingas en full omräkning varje bildruta. Flytta i stället en statisk panel med en transform.
4. **Kontrollera båda teman** Korn som ser rätt ut på mörkt kan se smutsigt ut på ljust. Justera opaciteten per tema, som i [gradienter i mörkt läge](https://gradiently.design/sv/guide/dark-mode-gradients).

För en variant med enbart CSS av samma idé, se [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture). Och om du vill ha korn utan att justera filter alls bär varje Mark från Gradiently sitt eget korn och material som en del av sitt recept, renderat live i vilken storlek du än designar.

En stående affisch med en djup gradientbakgrund och fin korntextur bakom en kort rubrik

En Mark med korn inbyggt i ytan. Bruset är en del av receptet, så det behåller samma skala i varje storlek.

## FAQ

### Vad gör feTurbulence i SVG?

Det skapar Perlin-brus i ett SVG-filter. Du kan visa bruset direkt som textur eller mata in det i andra primitiver som feColorMatrix, feDiffuseLighting eller feDisplacementMap.

### Vilken baseFrequency ska jag använda för korn?

Prova 0,7 till 0,9 med type fractalNoise och tre oktaver för fint filmkorn. Lägre värden ger större, mjukare detaljer.

### Vad är skillnaden mellan fractalNoise och turbulence?

fractalNoise är mjukt och jämnt, bra till korn och papper. turbulence har skarpare veck och passar för marmor-, eld- eller vatteneffekter.

### Varför syns skarvar i mitt SVG-brus när det upprepas?

Sätt `stitchTiles="stitch"` på feTurbulence och sätt filterområdet till hela panelen med x, y, width och height, så att kanterna möts och ingen mjuk ram syns.

### Är feTurbulence långsamt?

Det kan vara det på stora ytor eller när det animeras, eftersom bruset räknas om vid varje ommålning. En liten statisk panel som upprepas som bakgrund är billig.