Générateur de texture de bruit : grain SVG pour fonds CSS | We.Inc
Créez une texture de grain argentique ou de papier avec SVG feTurbulence. Réglez la fréquence, les octaves, la seed et l'opacité, prévisualisez-la sur un dégradé et copiez le SVG ou une data URL CSS.
Une texture de bruit est un moucheté aléatoire posé sur une couleur unie ou un dégradé pour donner un aspect imprimé plutôt que numérique. Dans le navigateur, vous pouvez la créer sans aucun fichier image : le filtre SVG feTurbulence génère du bruit de Perlin à partir d'une fréquence, d'un nombre d'octaves et d'une seed. Réglez-la ci-dessous et copiez quelques centaines d'octets de code.
Attributs de feTurbulence (valeurs par défaut selon MDN)
Attribut
Rôle
Défaut
baseFrequency
Taille du moucheté : plus le nombre est élevé, plus le grain est fin. Un seul nombre, ou des valeurs x et y distinctes
numOctaves
Couches de détail superposées : plus il y en a, plus c'est riche et lent
fractalNoise (doux, nuageux) ou turbulence (plus net, ondulé)
Nombre de départ du motif aléatoire, changez-le pour une autre disposition
stitchTiles
stitch lisse les bords pour que les tuiles répétées se raccordent sans couture
noStitch
Le grain enlève l'aspect plastique des grands dégradés et évite les effets de bandes sur les larges fonds de hero. Une tuile de grain en PNG ajoute un téléchargement et devient floue une fois agrandie, alors qu'un filtre SVG est un texte minuscule qui reste net à toutes les tailles. Ajustez les curseurs et observez la texture sur un dégradé d'exemple.
Choisissez le bruit fractal pour un grain argentique doux ou la turbulence pour un aspect plus rugueux et marbré.
Augmentez la fréquence pour un grain plus fin et ajoutez des octaves pour plus de détail. Changez la seed pour une autre disposition aléatoire.
Réglez l'intensité du grain sur le dégradé d'exemple et choisissez s'il garde la couleur ou passe en gris.
Copiez le fichier SVG, ou le CSS qui l'intègre en arrière-plan sous forme de data URL.
Pour un grain subtil sur un dégradé, gardez l'opacité de la texture entre 0.1 et 0.3. Au-delà, l'effet commence à paraître sale.
Une fréquence d'environ 0.6 à 0.9 avec du bruit fractal donne l'effet d'un grain argentique aux tailles d'écran habituelles.
Désaturez le bruit en gris sauf si vous voulez des points colorés : feTurbulence produit du bruit coloré dans chaque canal.
Les grandes zones filtrées coûtent du temps de rendu. Appliquer le grain comme image de fond d'une tuile fixe est moins coûteux que filtrer en direct un élément plein écran.
Questions fréquentes
Qu'est-ce que feTurbulence ?
C'est une primitive de filtre SVG qui crée une image à partir de la fonction de bruit de Perlin. Elle n'a besoin d'aucune image en entrée, donc un seul élément filter dans un SVG peut peindre toute une texture. Selon MDN, les navigateurs la prennent largement en charge depuis 2015.
Quelle est la différence entre fractalNoise et turbulence ?
fractalNoise mélange ses octaves en douceur et ressemble à des nuages doux ou à du grain argentique. turbulence utilise les valeurs absolues du bruit, ce qui crée des crêtes plus nettes, plus proches du marbre, de la fumée ou des ondulations de l'eau.
Comment ajouter du grain à un dégradé CSS ?
Superposez deux arrière-plans : le SVG de bruit en data URL au-dessus et le dégradé en dessous, ou placez le bruit sur une couche ::before à faible opacité avec un mode de fusion comme overlay ou soft-light. L'exemple de cette page montre la version avec pseudo-élément.
La texture se répétera-t-elle sans couture ?
Réglez stitchTiles sur stitch. Le navigateur ajuste alors légèrement la fréquence pour que le motif tienne dans un nombre entier de tuiles, ce qui supprime la jointure visible là où les copies se rejoignent.
Comment les nombres se traduisent à l'écran
baseFrequency se mesure en cycles de bruit par pixel de la zone du filtre, donc 0.05 donne de grandes taches et 0.9 des points de la taille d'une poussière. Deux nombres étirent le bruit, ce qui est utile pour du métal brossé ou du veinage de bois.
Chaque octave supplémentaire ajoute une couche plus fine à fréquence double et à intensité moitié moindre. Au-delà de quatre ou cinq, la différence est difficile à voir, mais le travail du moteur de rendu continue d'augmenter.
Réussir le grain sur un site
Le grain fonctionne mieux comme une couche discrète. Fusionnez-le avec overlay ou soft-light pour qu'il éclaircisse les zones claires et assombrisse les zones sombres, au lieu de tout griser.
Vérifiez le contraste de votre texte après avoir ajouté la texture. Un moucheté derrière un petit texte peut le rendre plus difficile à lire, alors réservez le grain chargé aux arrière-plans et aux zones de hero.
Du grain sur une carte en dégradé
Couche de bruit avec un mode de fusion
Le SVG peint un bruit gris dans une tuile de 200 pixels. La couche ::before le répète à faible opacité et le fusionne avec le dégradé.
La même texture en fichier SVG autonome
Enregistrez-le sous grain.svg et utilisez-le avec background-image: url(grain.svg). La matrice de couleur passe le bruit en gris.
Atelier de grain
Chaque modification recalcule le filtre SVG en direct sur le dégradé d'exemple. Rien n'est envoyé : la texture est dessinée par votre navigateur.