# SVG feTurbulence: kohina-, rakeisuus- ja tekstuurisuotimet

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

Yksi suodinprimitiivi tekee lähes kaikki verkon tekstuurit: rakeisuutta liukuvärin päälle, paperia kortin taakse ja aaltoilua reunaan. Näin kukin attribuutti toimii, mukana toimivat reseptit.

## The short version

- SVG feTurbulence on suodinprimitiivi, joka luo Perlin-kohinaa rakeisuudeksi, paperiksi, pilviksi tai siirtymän lähteeksi.
- baseFrequency-attribuutti määrittää kohinan koon: korkeat arvot noin 0,6 ja 0,9 välillä tuottavat hienoa rakeisuutta, matalat arvot noin 0,01 ja 0,05 välillä suuria pehmeitä pilviä.
- type="fractalNoise" tuottaa pehmeää, tasaista kohinaa rakeisuuteen ja paperiin, kun taas type="turbulence" tuottaa terävämpää, aaltoilevaa kohinaa marmoriin ja veteen.
- Pieni kohinalaatta, jolla on stitchTiles="stitch", lisää liukuvärin päälle matalalla peittävyydellä asetettuna tekstuuria ja peittää porrastumista pienellä laskentakustannuksella.
- feTurbulence on raskas laskea suurille alueille, joten renderöi se kerran laataksi sen sijaan, että animoisit sitä koko näytöllä.

**SVG feTurbulence** on suodinprimitiivi, joka täyttää alueensa Perlin-kohinalla. Yksinään tulos on värillinen kohinakenttä. Muihin primitiiveihin yhdistettynä siitä tulee filmirakeisuutta, paperikuitua, pilviä, marmoria tai muotojen vääristämisen lähde. Hallitset sitä viidellä attribuutilla: `type`, `baseFrequency`, `numOctaves`, `seed` ja `stitchTiles`. Useimmat modernien verkkosivujen tekstuurit, myös [rakeisten liukuvärien](https://gradiently.design/fi/guide/grainy-gradients) rakeisuus, alkavat tästä.

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

Minimi: kohinaa tuottava suodin suorakulmioon sovellettuna. Tulos on moniväristä kohinaa, kunnes poistat värin.

## Mitä kukin feTurbulence-attribuutti tekee

| Attribuutti | Arvot | Vaikutus |
| --- | --- | --- |
| `type` | `turbulence` (oletus) tai `fractalNoise` | Aaltoileva ja terävä tai pehmeä ja tasainen |
| `baseFrequency` | Yksi luku tai kaksi lukua x- ja y-akselille | Pienempi arvo tuottaa suurempia yksityiskohtia |
| `numOctaves` | Kokonaisluku, oletus 1 | Hienompien yksityiskohtien kerrokset hidastavat laskentaa |
| `seed` | Mikä tahansa luku, oletus 0 | Erilainen satunnaiskuvio |
| `stitchTiles` | `noStitch` (oletus) tai `stitch` | Sovittaa reunat laattojen saumattomaan toistoon |

Viisi attribuuttia. Muuta säätäessäsi yhtä kerrallaan, koska ne vaikuttavat toisiinsa.

`baseFrequency` on arvo, jota säädät useimmin. Sitä mitataan jaksoina käyttäjäyksikköä kohti, joten `0.8` pakkaa yksityiskohdat lähekkäin ja `0.02` venyttää ne hitaiksi pilviksi. Kaksi arvoa, kuten `baseFrequency="0.01 0.3"`, venyttävät kohinaa yhden akselin suunnassa. Näin jäljitellään harjattua metallia ja puunsyitä.

| baseFrequency | Ulkonäkö | Käyttö |
| --- | --- | --- |
| 0,8 ja 0,9 välillä | Hieno filmirakeisuus | Liukuvärien ja valokuvien päällä |
| 0,5 ja 0,7 välillä | Näkyvä rakeisuus, risografia | Julisteet, toimitukselliset sivut |
| 0,15 ja 0,3 välillä | Karkea pilkutus, betoni | Taustat, kivi |
| 0,02 ja 0,05 välillä | Pilvet, savu | Paperikuidut, pehmeä valaistus |
| 0,005 ja 0,01 välillä | Suuret hitaat aallot | Siirtymät, marmori |

Lähtöarvoja noin 300 pikseliä leveälle laatalle. Kohina skaalautuu SVG:n mukana, joten suurempana piirretty laatta näyttää karkeammalta.

### type="fractalNoise"

- Pehmeä, pilvimäinen ja tasaisesti jakautunut
- Sopii rakeisuuteen, paperiin ja sumuun
- Tavallinen valinta päälle asetettaville tekstuureille

### type="turbulence"

- Terävämpi, tummia poimuja
- Sopii marmoriin, tuleen ja veteen
- Näyttää levottomalta koko pinnan peittävänä kerroksena

## Resepti: rakeisuutta liukuvärin päälle

feTurbulencen hyödyllisin tehtävä on lisätä rakeisuutta. Puhdas digitaalinen liukuväri porrastuu näkyviksi raidoiksi, varsinkin tummissa sävyissä. Kevyt kohina hajottaa raidat ja saa pinnan tuntumaan painetulta. Vaiheet: luo kohina, poista sen väri ja aseta se sitten liukuvärin päälle heikkona kerroksena.

```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 arvolla saturate 0 muuttaa kohinan harmaaksi. Suodinalueen asettaminen koko suorakulmion kokoiseksi estää pehmeän reunuksen.

Tallenna tämä nimellä `grain.svg` tai sisällytä se data URI -muodossa. Toista se sitten liukuvärin yläpuolella olevassa pseudoelementissä.

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

Overlay- ja soft light -sekoitustilat säilyttävät liukuvärin värin ja lisäävät vain tekstuuria. Aloita peittävyydestä 0,08 ja 0,15 välillä ja arvioi koko näytöllä.

Pohja rakeisuuden alla: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

Tällaisissa tummanvioleteissa liukuväreissä porrastuminen näkyy eniten, joten juuri niissä rakeisuus ansaitsee paikkansa. Syystä lisää artikkelissa [liukuvärin porrastuminen](https://gradiently.design/fi/guide/gradient-banding).

## Resepti: paperitekstuuri

Paperi syntyy matalataajuisesta kohinasta, jonka valonlähde muuttaa kohokuvioinniksi. `feDiffuseLighting` käsittelee kohinaa korkeuskarttana ja valaisee sitä sivulta. Näin syntyvät puuvillapaperiarkin pehmeät kumpareet.

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

Nosta surfaceScale-arvoa saadaksesi karheamman arkin. Laske elevation-arvoa saadaksesi viistovalon, joka korostaa jokaista kuitua.

Yhdistä lämpimiin luonnonvalkoisiin pohjiin. [Paperitekstuuriset taustat](https://gradiently.design/fi/guide/paper-texture-background) tarjoaa sopivia paletteja.

## Resepti: vääristetyt reunat feDisplacementMapilla

Kohina voi myös siirtää pikseleitä. `feDisplacementMap` lukee kohinan ja siirtää lähteen jokaista pikseliä enintään `scale`-arvon verran. Sillä syntyy käsin piirrettyjä viivoja, sulavaa tekstiä ja aaltoilevaa vettä.

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

scale-arvo 4 ja 12 välillä näyttää käsintehdyltä. Yli 30:n arvoilla lähde muuttuu tunnistamattomaksi. Vaihda seed-arvoa saadaksesi erilaista aaltoilua.

> **Teksti pysyy tekstinä** Suodatettu SVG-teksti on yhä oikeaa tekstiä, joten sen voi valita ja lukea ruudunlukijalla. Pidä vääristymät hillittyinä kaikessa, mitä ihmisten täytyy lukea.

## Suorituskyky ja selainten toiminta

feTurbulence toimii kaikissa nykyisissä selaimissa, mutta monet laskevat sen suorittimella, ja kustannus kasvaa pinta-alan ja oktaavien mukana. 240 pikselin laatta lasketaan kerran ja toistetaan, mikä on kevyttä. Koko näytön suodin elävässä elementissä lasketaan uudelleen aina elementin piirtyessä, mikä voi hidastaa puhelimia.

1. **Toista laattana** Renderöi kohina pieneen SVG:hen attribuutilla `stitchTiles="stitch"` ja toista sitä taustakuvana.
2. **Pidä oktaavien määrä pienenä** Yli 4:n `numOctaves`-arvo lisää harvoin näkyviä yksityiskohtia rakeisuuden kokoluokassa, mutta maksaa joka kerta laskenta-aikaa.
3. **Vältä animointia** `baseFrequency`- tai `seed`-arvon animointi pakottaa laskemaan kaiken uudelleen joka ruudulla. Siirrä sen sijaan staattista laattaa transformilla.
4. **Tarkista molemmat teemat** Tummalla hyvältä näyttävä rakeisuus voi näyttää likaiselta vaalealla. Säädä peittävyys teemakohtaisesti kuten artikkelissa [tumman tilan liukuvärit](https://gradiently.design/fi/guide/dark-mode-gradients).

Pelkkään CSS:ään perustuvan version löydät artikkelista [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture). Jos haluat rakeisuutta säätämättä suotimia lainkaan, jokainen Gradientlyn Mark sisältää oman rakeisuutensa ja materiaalinsa osana reseptiä, joka renderöidään elävänä kaikissa suunnittelemissasi ko’oissa.

Pystysuuntainen juliste, jossa syvä liukuväritausta ja hieno rakeisuustekstuuri lyhyen otsikon takana

Mark, jonka pintaan kuuluu rakeisuus. Kohina on osa reseptiä, joten sen mittakaava pysyy samana joka koossa.

## FAQ

### Mitä feTurbulence tekee SVG:ssä?

Se luo Perlin-kohinaa SVG-suotimen sisällä. Voit näyttää kohinan suoraan tekstuurina tai syöttää sen muihin primitiiveihin, kuten feColorMatrixiin, feDiffuseLightingiin tai feDisplacementMapiin.

### Mikä baseFrequency-arvo sopii rakeisuuteen?

Kokeile arvoa 0,7 ja 0,9 välillä, tyyppiä fractalNoise ja kolmea oktaavia hienoon filmirakeisuuteen. Matalammat arvot tuottavat suurempia, pehmeämpiä yksityiskohtia.

### Mitä eroa on fractalNoisella ja turbulencella?

fractalNoise on pehmeä ja tasainen, joten se sopii rakeisuuteen ja paperiin. turbulencessa on terävämpiä poimuja, ja se sopii marmori-, tuli- ja vesitehosteisiin.

### Miksi SVG-kohinan toistossa näkyy saumoja?

Aseta feTurbulencelle `stitchTiles="stitch"` ja määritä suodinalue koko laatan kokoiseksi x-, y-, width- ja height-arvoilla. Näin reunat kohtaavat eikä pehmeää reunusta synny.

### Onko feTurbulence hidas?

Suurilla alueilla tai animoituna se voi olla hidas, koska kohina lasketaan uudelleen jokaisella piirrolla. Pieni staattinen laatta taustana toistettuna on kevyt.