SVG feTurbulence: kohina-, rakeisuus- ja tekstuurisuotimet

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 rakeisuus, alkavat tästä.

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

Mitä kukin feTurbulence-attribuutti tekee

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ä.

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.

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

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

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

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.

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

Yhdistä lämpimiin luonnonvalkoisiin pohjiin. Paperitekstuuriset taustat 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ä.

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

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. 1

   Toista laattana

   Renderöi kohina pieneen SVG:hen attribuutilla stitchTiles="stitch" ja toista sitä taustakuvana.

2. 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. 3

   Vältä animointia

   baseFrequency- tai seed-arvon animointi pakottaa laskemaan kaiken uudelleen joka ruudulla. Siirrä sen sijaan staattista laattaa transformilla.

4. 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.

Pelkkään CSS:ään perustuvan version löydät artikkelista CSS-kohinatekstuuri. 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.