Générateur de vagues SVG
Réglez la vague jusqu’à ce qu’elle vous plaise, générez d’autres variantes d’un clic et copiez le SVG. Il s’étire sur la largeur de l’écran et reste léger, sans image.
Mode d’emploiDes vagues pour séparer les sections
Générateur de vagues SVG: à quoi ça sert
Réglez la hauteur, le nombre de vagues, la variation et le nombre de couches transparentes de la vague, choisissez la couleur et le style (doux, pointu ou en marches) et générez des variantes d’un clic. L’option inverser retourne la vague vers le haut.
Le SVG est fourni avec un viewBox de 1440 px de large et preserveAspectRatio=none, pour s’étirer sur la largeur de l’écran. Téléchargez le fichier ou copiez le code.
Mode d’emploi
- Réglez hauteur, vagues, variation et couches.
- Choisissez couleur et style et générez d’autres vagues jusqu’à ce qu’elles vous plaisent.
- Téléchargez ou copiez le SVG et collez-le entre les sections.
Quand l’utiliser
- Séparer les sections de landing pages.
- En-têtes et pieds de page au look moderne.
- Arrière-plans de bannières et d’en-têtes.
Questions fréquentes
Comment utiliser la vague sur le site ?
Collez le SVG entre deux sections, juste après la fin de l’une et avant l’autre. Utilisez la couleur de la section du dessous pour la vague et celle de la section du dessus pour le fond, ou l’inverse avec l’option inverser.
La vague rend-elle bien sur mobile ?
Oui. Le SVG utilise preserveAspectRatio=none et une largeur de 100 %, il s’étire donc sur la largeur de l’écran en gardant la hauteur que vous choisissez dans le CSS.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.