SVG feTurbulence: brus-, korn- och texturfilter

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, börjar här.

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

Vad varje feTurbulence-attribut gör

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.

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.

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

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

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.

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

Para ihop det med varma off-white-bottnar. Bakgrunder med papperstextur 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.

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

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

   Gör en panel

   Rendera bruset i en liten SVG med stitchTiles="stitch" och upprepa det som bakgrundsbild.

2. 2

   Håll oktaverna låga

   numOctaves över 4 ger sällan synliga detaljer i kornstorlek och kostar varje gång.

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

För en variant med enbart CSS av samma idé, se CSS-brustextur. 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.