Les pubs vous déplaisent ? Aller Sans pub Auj. 

Générateur de bruit et de textures SVG

CouleurPromoteurImage

ANNONCE · Supprimer ?

SAISIR

Processus automatique

Type de bruit

Taper

Paramètres du bruit

Fréquence de base : 65 Plus élevé = grain plus fin. La valeur est divisée par 100 (0,01–2,0).

Octaves : 3 Plus d'octaves = détail plus riche (plus lent à générer).

Semence : 7 Modifiez pour obtenir un motif aléatoire différent.

Coller les tuiles (sans jointure)

Mode de couleur

Monochrome

Coloré (teinté)

Arrière-plan

Teinte du bruit

Opacité du bruit % : 35

Contraste: 120 Augmente l'intensité du bruit via feComponentTransfer.

Taille de sortie

Largeur

Hauteur

SORTIR

Côté client

SVG intégré

Fond CSS (URI de données)

Filtre SVG uniquement

Juste l' élément — appliquez avec filter="url(#noise)" sur n'importe quelle forme SVG.

ANNONCE · Supprimer ?

Guide

Générateur de bruit et de textures SVG

Créez des textures de bruit organique et de turbulence directement dans votre navigateur à l'aide du filtre SVG feTurbulence . Déplacez les curseurs, ajustez la semence, choisissez une couleur de teinte et observez la texture se mettre à jour en temps réel. Exportez sous forme d'SVG intégré, d'une URI de données CSS ou d'un filtre SVG réutilisable que vous pouvez appliquer à n'importe quelle forme. background-image Choisissez un type de bruit —

Comment utiliser

Bruit fractal pour un grain organique filmique, Turbulence pour des vagues nuageuses. Fréquence de base
Modifier pour la taille du grain et Octaves pour la richesse du détail. Semence
Modifier la pour parcourir différents motifs aléatoires. Coller les tuiles
Basculer pour une sortie répétable sans jointure. Mode coloré
Choisir Monochrome ou et ajustez le fond, la teinte, l'opacité et le contraste. Copiez l'élément SVG, l'URI de données CSS ou le snippet de filtre, ou téléchargez le fichier SVG.
Deux types de bruit

Caractéristiques

– Bruit fractal (grain organique) et Turbulence (vagues fumées). – Rérender délagé à chaque changement de curseur.
Prévisualisation en temps réel Contrôle des octaves
– 1 à 8 octaves pour équilibrer la richesse et la performance. Reproductibilité avec semence
– Chaque semence correspond à un motif aléatoire déterministe. Tiling sans jointure
– Optionnel pour des fonds répétables. stitchTiles="stitch" Mono ou coloré
– Grain en gris ou toute teinte via Contraste et opacité feColorMatrix.
– Augmenter l'intensité avec – SVG intégré, fond CSS en URI de données ou filtre SVG uniquement. feComponentTransfer.
Trois formats de sortie – Enregistrer sous forme autonome
Téléchargement en un clic Quand utiliser les textures de bruit .svg.

Gradients grainés

– Appliquez du bruit sur un gradient CSS pour éviter les bandes. Effets papier et film
– Ajoutez un léger grain à des illustrations planes ou aux sections d'accueil. Fonds nuageux et fumés
– Utilisez la turbulence avec une fréquence faible et un petit nombre d'octaves. Effets de détérioration et superpositions de texture
– Appliquez le filtre sur des formes pour obtenir un effet manuscrit. Qu'est-ce que feTurbulence et comment fonctionne-t-il ?

 FAQ

feTurbulence est une primitive de filtre SVG qui génère du bruit de Perlin. Elle produit un motif pseudo-aléatoire basé sur une semence et une fréquence de base. Des fréquences basses produisent des formes étendues et fumées ; des fréquences élevées produisent un grain fin. Plusieurs octaves superposent du bruit à des fréquences croissantes pour un détail plus riche.

Quelle est la différence entre fractalNoise et turbulence ?
Les deux sont basés sur le bruit de Perlin. fractalNoise utilise directement le bruit signé, ce qui donne un grain plus lisse et organique, ressemblant à du film. turbulence prend la valeur absolue, produisant des vagues à forte contraste qui ressemblent à de la fumée ou à du marbre.

Pourquoi utiliser des textures SVG de bruit au lieu d'une image PNG ?
Les textures SVG sont générées en temps réel par le navigateur, donc elles s'adaptent à n'importe quelle taille sans devenir floues, et n'ajoutent pas de requête HTTP en dehors d'une petite URI de données intégrée. Elles se réactualisent clairement à n'importe quel ratio de pixels de l'appareil.

Qu'est-ce que fait stitchTiles ?
Avec stitchTiles="stitch", le filtre SVG assure que les lignes du motif se correspondent proprement aux limites des tuiles, permettant ainsi de répéter le motif comme fond CSS sans visible jointure.

Les filtres SVG sont-ils pris en charge par tous les navigateurs ?
Oui — feTurbulence fait partie de SVG 1.1 et est pris en charge par tous les navigateurs modernes, y compris Chrome, Safari, Firefox et Edge. La performance varie selon le nombre d'octaves et la zone rendue, donc privilégiez de petites tuiles lorsque vous ciblez des appareils à performance faible.

Copier SVG

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?