Générateur de vague SVG
Générez des vagues SVG lisses, en pics ou en marches avec couches, amplitude et graine. Téléchargez le .svg ou copiez-le en data URI CSS pour des séparateurs de section.
Réglages de la vague
Les mêmes réglages et la même graine donnent toujours la même forme.
Aperçu
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");Outils Connexes
Voir ToutQu'est-ce que Générateur de vague SVG ?
Crée des formes de vagues en SVG pour des séparateurs de section et des arrière-plans. Choisissez des courbes lisses, des pics aigus ou des marches, empilez jusqu'à cinq couches, retournez la vague en haut et exportez-la en fichier .svg ou en data URI CSS background-image prête à coller.
Comment utiliser Générateur de vague SVG
- Choisissez une Couleur et un Style de vague (Lisse, Pics, Marches) ainsi que la Position (En bas ou En haut).
- Ajustez Complexité (segments), Amplitude, Couches, Opacité, Largeur et Hauteur.
- Cliquez sur Aléatoire ou saisissez une Graine pour obtenir une vague différente mais reproductible.
- Téléchargez le .svg ou copiez le code SVG.
- Ou copiez le Fond CSS (data URI) pour utiliser la vague sans fichier séparé.
Exemple
Complexity 2, amplitude 0, 1440×320, color #0099ff
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>
Une amplitude de 0 donne une ligne plate, qui montre la construction exacte de Bézier.
Quand utiliser Générateur de vague SVG
Utilisez-le pour des séparateurs de section ondulés, des pieds de page et des fonds de bandeaux. preserveAspectRatio="none" étire la vague à n'importe quelle largeur, ce qui convient aux séparateurs pleine largeur ; pour des illustrations devant garder leurs proportions, modifiez le SVG dans un éditeur vectoriel.
Comment fonctionne Générateur de vague SVG
La largeur est découpée en segments égaux ; la hauteur de chaque point est la ligne de base plus un décalage pseudo-aléatoire à graine (mulberry32) mis à l'échelle par l'amplitude. Les vagues lisses font passer une spline de Catmull-Rom par les points, convertie en commandes de Bézier cubiques C ; les pics utilisent des lignes droites et les marches des lignes horizontales/verticales. Le tracé est fermé jusqu'au bord inférieur (ou supérieur). Plusieurs couches utilisent des lignes de base et des graines différentes, avec une opacité croissante vers l'avant. La data URI garde le SVG lisible et n'encode en pourcentage que les caractères non sûrs.
Cas d'utilisation courants
- Séparateurs ondulés entre les sections d'une page d'atterrissage
- Fonds de pied de page en couches
- Bas de sections de bandeau
- Images d'arrière-plan via des data URI CSS
- Formes décoratives reproductibles dans des design systems
Questions Fréquentes
Obtiendrai-je à nouveau la même vague ?
Oui. Les mêmes réglages et la même Graine génèrent toujours un balisage SVG identique.
SVG en ligne ou data URI ?
Un SVG en ligne peut être stylé et animé en CSS ; une data URI dans background-image garde votre HTML propre mais ne peut plus être restylée après encodage.
Comment placer une vague en haut d'une section ?
Réglez Position sur En haut ; le tracé est fermé jusqu'au bord supérieur pour se remplir vers le haut.