Noise-Textur-Generator: SVG-Grain für CSS-Hintergründe | We.Inc
Erstelle eine Filmkorn- oder Papier-Noise-Textur mit SVG feTurbulence. Stelle Frequenz, Oktaven, Seed und Deckkraft ein, sieh dir die Vorschau über einem Verlauf an und kopiere das SVG oder eine CSS-Data-URL.
Eine Noise-Textur ist ein zufälliges Gesprenkel über einer flachen Farbe oder einem Verlauf, damit es gedruckt statt digital wirkt. Im Browser geht das ganz ohne Bilddatei: Der SVG-Filter feTurbulence erzeugt Perlin-Noise aus einer Frequenz, einer Anzahl von Oktaven und einem Seed. Stimme ihn unten ab und kopiere ein paar hundert Bytes Code.
Attribute von feTurbulence (Standardwerte laut MDN)
Attribut
Was es tut
Standard
baseFrequency
Größe der Sprenkel; höhere Zahlen ergeben feineres Korn. Eine Zahl oder getrennte Werte für x und y
numOctaves
Übereinandergelegte Detailebenen; mehr wirkt reichhaltiger und ist langsamer
fractalNoise (weich, wolkig) oder turbulence (schärfer, gewellt)
Startzahl für das Zufallsmuster; ändere sie für eine andere Anordnung
stitchTiles
stitch glättet die Ränder, damit wiederholte Kacheln ohne Nahtstellen aneinanderpassen
noStitch
Körnung nimmt großen Verläufen den Plastik-Look und verhindert Farbabstufungen auf breiten Hero-Hintergründen. Eine PNG-Grain-Kachel bedeutet einen zusätzlichen Download und wird beim Skalieren unscharf, während ein SVG-Filter aus winzigem Text besteht und in jeder Größe scharf rendert. Verstelle die Regler und beobachte die Textur über einem Beispielverlauf.
Wähle fractal noise für weiches Filmkorn oder turbulence für einen raueren, marmorierten Look.
Erhöhe die Frequenz für feineres Korn und füge Oktaven für mehr Details hinzu. Ändere den Seed für eine andere zufällige Anordnung.
Lege die Stärke der Körnung über dem Beispielverlauf fest und wähle, ob sie farbig bleibt oder grau wird.
Kopiere die SVG-Datei oder das CSS, das sie als Data-URL-Hintergrund einbettet.
Für dezente Körnung über einem Verlauf halte die Deckkraft der Textur zwischen 0.1 und 0.3. Höhere Werte wirken schnell schmutzig.
Eine Frequenz von etwa 0.6 bis 0.9 mit fractal noise wirkt bei normalen Bildschirmgrößen wie Filmkorn.
Entsättige das Noise zu Grau, außer du willst farbige Sprenkel; feTurbulence erzeugt in jedem Kanal farbiges Noise.
Große gefilterte Flächen kosten Renderzeit. Die Körnung als Hintergrundbild einer festen Kachel anzuwenden ist günstiger, als ein bildschirmfüllendes Element live zu filtern.
Häufige Fragen
Was ist feTurbulence?
Ein SVG-Filter-Primitiv, das aus der Perlin-Noise-Funktion ein Bild erzeugt. Es braucht kein Eingabebild, daher kann ein einziges Filterelement in einem SVG eine ganze Textur malen. Laut MDN wird es seit 2015 von Browsern breit unterstützt.
Was ist der Unterschied zwischen fractalNoise und turbulence?
fractalNoise mischt seine Oktaven weich und sieht aus wie zarte Wolken oder Filmkorn. turbulence verwendet Absolutwerte des Noise, was schärfere Grate erzeugt, eher wie Marmor, Rauch oder Wasserwellen.
Wie füge ich einem CSS-Verlauf Körnung hinzu?
Stapele zwei Hintergründe: das Noise-SVG als Data-URL oben und den Verlauf darunter. Oder lege das Noise auf eine ::before-Ebene mit geringer Deckkraft und einem Blend Mode wie overlay oder soft-light. Das Beispiel auf dieser Seite zeigt die Variante mit Pseudoelement.
Lässt sich die Textur ohne Nahtstellen kacheln?
Setze stitchTiles auf stitch. Der Browser passt dann die Frequenz leicht an, damit das Muster in eine ganze Zahl von Kacheln passt, und die sichtbare Naht an den Stellen, wo Kopien aufeinandertreffen, verschwindet.
Wie die Zahlen dem entsprechen, was du siehst
baseFrequency wird in Noise-Zyklen pro Pixel der Filterfläche gemessen, daher ergibt 0.05 große Flecken und 0.9 staubfeine Sprenkel. Zwei Zahlen strecken das Noise, was für gebürstetes Metall oder Holzmaserung nützlich ist.
Jede zusätzliche Oktave fügt eine feinere Ebene mit doppelter Frequenz und halber Stärke hinzu. Ab vier oder fünf ist die Veränderung kaum zu sehen, der Aufwand für den Renderer wächst aber weiter.
Körnung auf einer Website gut aussehen lassen
Körnung wirkt am besten als ruhige Ebene. Blende sie mit overlay oder soft-light ein, damit sie helle Bereiche aufhellt und dunkle abdunkelt, statt alles grau zu machen.
Prüfe nach dem Hinzufügen der Textur den Kontrast deiner Texte. Sprenkel hinter kleiner Schrift erschweren das Lesen, also beschränke unruhige Körnung auf Hintergründe und Hero-Bereiche.
Körnung auf einer Karte mit Verlauf
Noise-Ebene mit Blend Mode
Das SVG malt graues Noise in eine Kachel von 200 Pixeln. Die ::before-Ebene wiederholt sie mit geringer Deckkraft und mischt sie mit dem Verlauf.
Dieselbe Textur als eigenständige SVG-Datei
Speichere das als grain.svg und verwende es mit background-image: url(grain.svg). Die Farbmatrix macht das Noise grau.
Grain-Studio
Jede Änderung rendert den SVG-Filter live über dem Beispielverlauf neu. Es wird nichts hochgeladen; dein Browser zeichnet die Textur.