SVG feTurbulence: Filter für Rauschen, Körnung und Textur

SVG feTurbulence ist ein Filterprimitiv, das seinen Bereich mit Perlin Noise füllt. Allein ergibt es ein Feld aus farbigem Rauschen; kombiniert mit anderen Primitiven wird daraus Filmkorn, Papierfaser, Wolken, Marmor oder eine Quelle zum Verzerren von Formen. Du steuerst es mit fünf Attributen: type, baseFrequency, numOctaves, seed und stitchTiles. Die meisten Texturen auf modernen Websites, auch die Körnung bei körnigen Farbverläufen, 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>

Was jedes Attribut von feTurbulence macht

baseFrequency wirst du am häufigsten anfassen. Es wird in Zyklen pro Benutzereinheit gemessen, 0.8 packt Strukturen also dicht zusammen und 0.02 zieht sie zu langsamen Wolken auseinander. Zwei Werte wie baseFrequency="0.01 0.3" strecken das Rauschen entlang einer Achse, so werden gebürstetes Metall und Holzmaserung nachgeahmt.

Rezept: Körnung über einem Verlauf

Das Nützlichste an feTurbulence ist die Körnung. Ein sauberer digitaler Verlauf zerfällt in sichtbare Streifen, besonders dunkle; leichtes Rauschen bricht diese Streifen auf und lässt die Fläche gedruckt wirken. Die Schritte: Rauschen erzeugen, Farbe entfernen, dann mit geringer Stärke über den Verlauf legen.

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

Speichere das als grain.svg oder binde es als Data-URI ein und kachle es dann in einem Pseudoelement über dem Verlauf.

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

Rezept: Papiertextur

Papier ist niederfrequentes Rauschen, das durch eine Lichtquelle zum Relief wird. feDiffuseLighting behandelt das Rauschen als Höhenkarte und beleuchtet es von einer Seite, das ergibt die sanften Hügel eines Bogens Baumwollpapier.

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

Kombiniere es mit warmen, gebrochen weißen Gründen. Hintergründe mit Papiertextur hat passende Paletten.

Rezept: verzerrte Kanten mit feDisplacementMap

Rauschen kann auch Pixel bewegen. feDisplacementMap liest das Rauschen und verschiebt jeden Pixel der Quelle um bis zu scale Einheiten, so entstehen handgezeichnete Linien, schmelzende Schrift und gekräuseltes Wasser.

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

Performance und Verhalten im Browser

feTurbulence funktioniert in allen aktuellen Browsern, wird aber in vielen auf der CPU berechnet, und die Kosten wachsen mit Fläche und Oktaven. Eine Kachel von 240 Pixeln wird einmal berechnet und wiederholt, das ist günstig. Ein bildschirmfüllender Filter auf einem lebendigen Element wird bei jedem Neuzeichnen neu berechnet, was auf Handys langsam sein kann.

1. 1

   Kachle es

   Render das Rauschen in ein kleines SVG mit stitchTiles="stitch" und wiederhole es als Hintergrundbild.

2. 2

   Halte die Oktaven niedrig

   numOctaves über 4 bringt bei Korngrößen selten sichtbare Details und kostet jedes Mal.

3. 3

   Animiere es nicht

   Wer baseFrequency oder seed animiert, erzwingt in jedem Frame eine komplette Neuberechnung. Verschiebe stattdessen eine statische Kachel per Transform.

4. 4

   Prüfe beide Themes

   Körnung, die auf Dunkel richtig aussieht, kann auf Hell schmutzig wirken. Stimme die Deckkraft pro Theme ab, wie bei Farbverläufen im Dark Mode.

Für eine reine CSS-Variante derselben Idee siehe Rauschtextur in CSS. Und wenn du Körnung ganz ohne Filterfeinarbeit willst: Jeder Gradiently Mark bringt seine eigene Körnung und sein Material als Teil seines Rezepts mit, live gerendert in jeder Größe, in der du gestaltest.