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

[Canonical HTML page](https://gradiently.design/de/guide/svg-noise-filter)

Ein einziges Filterprimitiv erzeugt fast jede Textur im Web: Körnung über einem Verlauf, Papier hinter einer Karte, ein Wackeln an einer Kante. Hier steht, was jedes Attribut macht, mit Rezepten, die funktionieren.

## The short version

- SVG feTurbulence ist ein Filterprimitiv, das Perlin Noise erzeugt, das du als Körnung, Papier, Wolken oder Quelle für Verschiebungen nutzen kannst.
- Das Attribut baseFrequency bestimmt die Größe des Rauschens: Hohe Werte um 0,6 bis 0,9 ergeben feines Korn, niedrige um 0,01 bis 0,05 große, weiche Wolken.
- type="fractalNoise" erzeugt weiches, gleichmäßiges Rauschen für Körnung und Papier, type="turbulence" schärferes, geriffeltes Rauschen für Marmor und Wasser.
- Eine kleine Rauschkachel mit stitchTiles="stitch", mit geringer Deckkraft über einen Verlauf gelegt, bringt Textur und verdeckt Banding bei sehr geringen Kosten.
- feTurbulence ist auf großen Flächen aufwendig zu berechnen, render es also einmal als Kachel, statt es bildschirmfüllend zu animieren.

**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](https://gradiently.design/de/guide/grainy-gradients), beginnen hier.

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

Das Minimum: ein Filter, der Rauschen erzeugt, auf ein Rechteck angewendet. Das Ergebnis ist buntes Rauschen, bis du die Farbe entfernst.

## Was jedes Attribut von feTurbulence macht

| Attribut | Werte | Wirkung |
| --- | --- | --- |
| `type` | `turbulence` (Standard) oder `fractalNoise` | Geriffelt und scharf oder weich und gleichmäßig |
| `baseFrequency` | Eine Zahl oder zwei für x und y | Kleiner heißt größere Strukturen |
| `numOctaves` | Ganze Zahl, Standard 1 | Ebenen feinerer Details; kostet Tempo |
| `seed` | Beliebige Zahl, Standard 0 | Ein anderes Zufallsmuster |
| `stitchTiles` | `noStitch` (Standard) oder `stitch` | Glättet Kanten, damit Kacheln sauber wiederholen |

Die fünf Attribute. Ändere beim Abstimmen immer nur eins, weil sie sich gegenseitig beeinflussen.

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

| baseFrequency | Sieht aus wie | Einsatz |
| --- | --- | --- |
| 0,8 bis 0,9 | Feines Filmkorn | Overlay auf Verläufen und Fotos |
| 0,5 bis 0,7 | Sichtbares Korn, Risografie | Plakate, redaktionelle Seiten |
| 0,15 bis 0,3 | Grobe Sprenkel, Beton | Hintergründe, Stein |
| 0,02 bis 0,05 | Wolken, Rauch | Papierfasern, weiches Licht |
| 0,005 bis 0,01 | Große, langsame Wellen | Verschiebung, Marmor |

Startwerte für eine Kachel von etwa 300 Pixeln Breite. Das Rauschen skaliert mit dem SVG, eine größer gezeichnete Kachel wirkt also gröber.

### type="fractalNoise"

- Weich, wolkig, gleichmäßig verteilt
- Gut für Körnung, Papier und Nebel
- Die übliche Wahl für Overlays

### type="turbulence"

- Schärfer, mit dunklen Falten
- Gut für Marmor, Feuer und Wasser
- Wirkt als ganzes Overlay unruhig

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

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

feColorMatrix mit saturate 0 macht das Rauschen grau. Wenn der Filterbereich das ganze Rechteck abdeckt, entsteht kein weicher Rand.

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

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

Die Mischmodi Overlay und Soft Light behalten die Farbe des Verlaufs und fügen nur Textur hinzu. Beginne bei 0,08 bis 0,15 Deckkraft und beurteile es im Vollbild.

Der Grund unter der Körnung: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

Dunkelviolette Verläufe wie dieser zeigen Banding am stärksten, genau dort lohnt sich Körnung. Mehr zur Ursache in [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding).

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

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

Erhöhe surfaceScale für ein raueres Blatt; senke elevation für Streiflicht, das jede Faser betont.

Kombiniere es mit warmen, gebrochen weißen Gründen. [Hintergründe mit Papiertextur](https://gradiently.design/de/guide/paper-texture-background) 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.

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

Ein scale von 4 bis 12 wirkt handgemacht. Ab 30 ist die Quelle nicht mehr zu erkennen. Ändere seed für ein anderes Wackeln.

> **Text bleibt Text** Gefilterter SVG-Text ist weiterhin echter Text, er lässt sich also markieren und von Screenreadern lesen. Halte Verzerrungen bei allem, was man lesen muss, dezent.

## 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. **Kachle es** Render das Rauschen in ein kleines SVG mit `stitchTiles="stitch"` und wiederhole es als Hintergrundbild.
2. **Halte die Oktaven niedrig** `numOctaves` über 4 bringt bei Korngrößen selten sichtbare Details und kostet jedes Mal.
3. **Animiere es nicht** Wer `baseFrequency` oder `seed` animiert, erzwingt in jedem Frame eine komplette Neuberechnung. Verschiebe stattdessen eine statische Kachel per Transform.
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](https://gradiently.design/de/guide/dark-mode-gradients).

Für eine reine CSS-Variante derselben Idee siehe [Rauschtextur in CSS](https://gradiently.design/de/guide/css-noise-texture). 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.

Ein Plakat im Hochformat mit tiefem Verlaufshintergrund und feiner Körnung hinter einer kurzen Überschrift

Ein Mark mit in die Oberfläche eingebauter Körnung. Das Rauschen ist Teil des Rezepts und bleibt in jeder Größe im gleichen Maßstab.

## FAQ

### Was macht feTurbulence in SVG?

Es erzeugt Perlin Noise in einem SVG-Filter. Du kannst das Rauschen direkt als Textur zeigen oder in andere Primitive wie feColorMatrix, feDiffuseLighting oder feDisplacementMap weiterleiten.

### Welche baseFrequency eignet sich für Körnung?

Probier 0,7 bis 0,9 mit type fractalNoise und drei Oktaven für feines Filmkorn. Niedrigere Werte ergeben größere, weichere Strukturen.

### Was ist der Unterschied zwischen fractalNoise und turbulence?

fractalNoise ist weich und gleichmäßig, gut für Körnung und Papier. turbulence hat schärfere Falten und passt zu Marmor-, Feuer- oder Wassereffekten.

### Warum hat mein SVG-Rauschen beim Kacheln sichtbare Nähte?

Setze `stitchTiles="stitch"` auf feTurbulence und lege den Filterbereich mit x, y, width und height auf die ganze Kachel, damit die Kanten passen und kein weicher Rand entsteht.

### Ist feTurbulence langsam?

Auf großen Flächen oder animiert kann es das sein, weil das Rauschen bei jedem Neuzeichnen neu berechnet wird. Eine kleine statische Kachel als wiederholter Hintergrund ist günstig.