SVG feTurbulence: ruis-, korrel- en texturfilters

SVG feTurbulence is een filterprimitief dat zijn gebied vult met Perlin-ruis. Op zichzelf is het resultaat een veld van gekleurde statische ruis; gecombineerd met andere primitieven wordt het filmkorrel, papiervezel, wolken, marmer of een bron om vormen te vervormen. Je stuurt het met vijf attributen: type, baseFrequency, numOctaves, seed en stitchTiles. De meeste texturen op moderne websites, waaronder de korrel van korrelige kleurverlopen, beginnen hier.

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

Wat elk feTurbulence-attribuut doet

baseFrequency is degene die je het meest aanraakt. Hij wordt gemeten in cycli per gebruikerseenheid, dus 0.8 pakt kenmerken dicht op elkaar en 0.02 rekt ze uit tot trage wolken. Twee waarden, zoals baseFrequency="0.01 0.3", rekken de ruis uit langs één as, waarmee geborsteld metaal en houtnerf worden nagebootst.

Recept: korrel over een kleurverloop

Het nuttigste wat feTurbulence doet is korrel toevoegen. Een schoon digitaal kleurverloop vertoont banding in zichtbare strepen, vooral donkere; lichte ruis breekt die strepen op en laat het vlak gedrukt aanvoelen. De stappen: maak de ruis, strip de kleur en leg hem met lage sterkte over het kleurverloop.

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

Sla dat op als grain.svg of voeg het inline in als data-URI en tegel het dan in een pseudo-element boven het kleurverloop.

.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: papiertextuur

Papier is laagfrequente ruis die door een lichtbron in reliëf wordt omgezet. feDiffuseLighting behandelt de ruis als hoogtekaart en belicht hem van één kant, wat de zachte heuvels van een vel katoenpapier oplevert.

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

Combineer het met warme gebroken witte ondergronden. Achtergronden met papiertextuur heeft paletten die erbij passen.

Recept: vervormde randen met feDisplacementMap

Ruis kan ook pixels verplaatsen. feDisplacementMap leest de ruis en verschuift elke pixel van de bron met maximaal scale eenheden, wat handgetekende lijnen, smeltende tekst en rimpelend water oplevert.

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

Prestaties en gedrag per browser

feTurbulence werkt in elke huidige browser, maar wordt in veel ervan op de cpu berekend en de kosten groeien met oppervlak en octaven. Een tegel van 240 pixels wordt één keer berekend en herhaald, wat goedkoop is. Een schermvullend filter op een live element wordt opnieuw berekend telkens als het element opnieuw wordt getekend, wat op telefoons traag kan zijn.

1. 1

   Tegel het

   Render ruis in een kleine SVG met stitchTiles="stitch" en herhaal hem als achtergrondafbeelding.

2. 2

   Houd octaven laag

   numOctaves boven 4 voegt zelden zichtbaar detail toe bij korrelgroottes en kost elke keer rekenkracht.

3. 3

   Vermijd animeren

   Het animeren van baseFrequency of seed dwingt elk frame een volledige herberekening af. Verschuif in plaats daarvan een statische tegel met een transform.

4. 4

   Controleer beide thema’s

   Korrel die er op donker goed uitziet, kan er op licht vuil uitzien. Stem de dekking per thema af, zoals in kleurverlopen voor donkere modus.

Voor een aanpak met alleen css van hetzelfde idee zie css-ruistextuur. En als je korrel wilt zonder filters af te stemmen, heeft elke Gradiently Mark zijn eigen korrel en materiaal als onderdeel van zijn recept, live gerenderd op elk formaat waarin je ontwerpt.