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

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

Hvad hver attribut i feTurbulence gør

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.

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.

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

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

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.

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

Kombinér den med varme råhvide baggrunde. Baggrunde med papirtekstur 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.

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

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

   Brug fliser

   Tegn støjen i en lille SVG med stitchTiles="stitch", og gentag den som baggrundsbillede.

2. 2

   Hold oktaverne lave

   numOctaves over 4 tilføjer sjældent synlige detaljer i kornstørrelse og koster hver gang.

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

En version af samme idé kun i CSS finder du i støjtekstur i CSS. 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.