Générateur de motif SVG vagues

Composez un motif de vagues empilées en SVG, personnalisable en couleur, amplitude et nombre de couches, pour un fond de section ou une bannière. Traitement 100% local dans votre navigateur — rien n'est envoyé à un serveur.

Télécharger le SVG

Comment ça marche

Le motif est construit en empilant plusieurs courbes sinusoïdales semi-transparentes, de la plus haute (plus fine et plus opaque) à la plus basse (plus large et plus douce), pour donner une impression de profondeur proche d'une bannière "vagues" classique utilisée en bas de section de page d'accueil. Chaque couche a un déphasage légèrement différent pour éviter que les courbes ne se superposent parfaitement.

Le fichier téléchargé garde-t-il une qualité parfaite à n'importe quelle taille ?

Oui, il s'agit d'un vrai SVG vectoriel : vous pouvez l'intégrer tel quel dans une page web (il s'adapte à la largeur de son conteneur via son viewBox) ou l'agrandir dans un logiciel de design sans aucune perte de netteté, contrairement à une image bitmap.

Comment l'utiliser comme fond de section sur mon site ?

Copiez le code SVG et collez-le directement dans votre HTML, ou téléchargez le fichier et référencez-le comme image de fond CSS. Pour un effet de bannière en bas de section, positionnez-le en position: absolute; bottom: 0 avec width: 100%.

La génération du motif se fait entièrement en JavaScript dans votre navigateur, sans aucun appel réseau.