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

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, begynner her.

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

Hva hvert feTurbulence-attributt gjør

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.

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.

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

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

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

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.

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

Kombiner det med varme, brukket hvite bakgrunner. Bakgrunner med papirtekstur 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.

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

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

   Bruk fliser

   Render støy i en liten SVG med stitchTiles="stitch", og gjenta den som et bakgrunnsbilde.

2. 2

   Hold antallet oktaver lavt

   numOctaves over 4 tilfører sjelden synlige detaljer i kornstørrelse, men krever ressurser hver gang.

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

For en variant med bare CSS, se støytekstur i CSS. 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.