Generatore di Texture Noise: Grana SVG per Sfondi CSS | We.Inc
Crea una texture a grana di pellicola o di carta con SVG feTurbulence. Imposta frequenza, ottave, seed e opacità, guarda l'anteprima su un gradiente e copia l'SVG o un data URL CSS.
Una texture noise è una puntinatura casuale sovrapposta a un colore pieno o a un gradiente, così sembra stampata invece che digitale. Nel browser puoi crearla senza alcun file immagine: il filtro SVG feTurbulence genera rumore di Perlin a partire da una frequenza, un numero di ottave e un seed. Regolala qui sotto e copia poche centinaia di byte di codice.
Attributi di feTurbulence (valori predefiniti da MDN)
Attributo
Cosa fa
Predefinito
baseFrequency
Dimensione della puntinatura; numeri più alti danno una grana più fine. Un solo numero, oppure valori x e y separati
numOctaves
Livelli di dettaglio sovrapposti; di più significa più ricco e più lento
fractalNoise (morbido, nuvoloso) o turbulence (più netto, increspato)
Numero di partenza per il motivo casuale; cambialo per una disposizione diversa
stitchTiles
stitch ammorbidisce i bordi così le piastrelle ripetute si uniscono senza giunture
noStitch
La grana toglie l'aspetto plastico ai grandi gradienti ed evita il banding dei colori sugli sfondi hero molto larghi. Una piastrella PNG di grana aggiunge un download e diventa sfocata quando viene scalata, mentre un filtro SVG è un piccolo testo che resta nitido a qualsiasi dimensione. Regola i cursori e guarda la texture su un gradiente di esempio.
Scegli fractal noise per una grana di pellicola morbida o turbulence per un aspetto più ruvido e marmorizzato.
Alza la frequenza per una grana più fine e aggiungi ottave per più dettaglio. Cambia il seed per una disposizione casuale diversa.
Imposta l'intensità della grana sul gradiente di esempio e scegli se mantiene il colore o diventa grigia.
Copia il file SVG, oppure il CSS che lo incorpora come sfondo tramite data URL.
Per una grana discreta su un gradiente, tieni l'opacità della texture tra 0.1 e 0.3. Valori più alti iniziano a sembrare sporchi.
Una frequenza intorno a 0.6 a 0.9 con fractal noise appare come grana di pellicola alle normali dimensioni dello schermo.
Desatura il rumore in grigio a meno che tu non voglia puntini colorati; feTurbulence produce rumore colorato in ogni canale.
Le grandi aree filtrate costano tempo di rendering. Applicare la grana come immagine di sfondo di una piastrella fissa costa meno che filtrare dal vivo un elemento a schermo intero.
Domande frequenti
Cos'è feTurbulence?
È una primitiva di filtro SVG che crea un'immagine a partire dalla funzione di rumore di Perlin. Non richiede un'immagine di input, quindi un singolo elemento filter dentro un SVG può dipingere un'intera texture. Secondo MDN, i browser la supportano ampiamente dal 2015.
Qual è la differenza tra fractalNoise e turbulence?
fractalNoise fonde le sue ottave in modo morbido e somiglia a nuvole soffici o alla grana della pellicola. turbulence usa i valori assoluti del rumore, creando creste più nette, più vicine al marmo, al fumo o alle increspature dell'acqua.
Come aggiungo la grana a un gradiente CSS?
Sovrapponi due sfondi: l'SVG del rumore come data URL sopra e il gradiente sotto, oppure metti il rumore su un livello ::before con opacità bassa e un blend mode come overlay o soft-light. L'esempio in questa pagina mostra la versione con lo pseudo-elemento.
La texture si ripete senza giunture?
Imposta stitchTiles su stitch. Il browser allora regola leggermente la frequenza in modo che il motivo stia in un numero intero di piastrelle, eliminando la giuntura visibile dove le copie si incontrano.
Come i numeri corrispondono a ciò che vedi
baseFrequency si misura in cicli di rumore per pixel dell'area del filtro, quindi 0.05 dà macchie grandi e 0.9 dà puntini grandi come polvere. Due numeri allungano il rumore, cosa utile per metallo spazzolato o venature del legno.
Ogni ottava in più aggiunge un livello più fine al doppio della frequenza e a metà dell'intensità. Oltre quattro o cinque il cambiamento è difficile da vedere, ma il lavoro per il motore di rendering continua a crescere.
Far stare bene la grana su un sito
La grana funziona meglio come livello discreto. Fondila con overlay o soft-light così schiarisce le parti chiare e scurisce quelle scure, invece di ingrigire tutto.
Controlla il contrasto del testo dopo aver aggiunto la texture. La puntinatura dietro un testo piccolo può renderlo più difficile da leggere, quindi limita la grana più fitta a sfondi e aree hero.
Grana su una card con gradiente
Livello di rumore con un blend mode
L'SVG dipinge rumore grigio in una piastrella di 200 pixel. Il livello ::before la ripete con opacità bassa e la fonde con il gradiente.
La stessa texture come file SVG autonomo
Salvalo come grain.svg e usalo con background-image: url(grain.svg). La matrice di colore rende il rumore grigio.
Studio della grana
Ogni modifica ridisegna dal vivo il filtro SVG sul gradiente di esempio. Non viene caricato nulla; la texture è disegnata dal tuo browser.