Générateur de Vagues SVG

Créez des Vagues SVG Lisses pour Séparer des Sections

Les vagues sont l'un des moyens les plus élégants de séparer deux sections d'une page : elles ajoutent du mouvement, de la personnalité et de la profondeur sans nécessiter d'image. Ce Générateur de Vagues SVG crée un simple élément <path> dans un <svg>, dimensionné pour s'étirer à n'importe quel conteneur avec width: 100%.

Contrôles

• Segments — nombre de bosses de la vague. Un segment donne une seule courbe douce ; dix segments donnent un motif très mouvementé.
• Amplitude — oscillation verticale de chaque bosse. Une amplitude faible donne une ondulation subtile ; une amplitude élevée donne une vague spectaculaire.
• Graine — entier déterministe qui contrôle la variation aléatoire entre les bosses. Cliquez sur relancer pour essayer de nouvelles formes.
• Inverser — bascule entre séparateur bas (vague en haut, remplissage en bas) et séparateur haut (vague en bas, remplissage en haut).
• Remplissage — couleur unie ou dégradé linéaire à deux arrêts sous n'importe quel angle.

Utiliser la Sortie

Comme le SVG utilise preserveAspectRatio="none", vous pouvez l'étirer à n'importe quelle largeur en l'enveloppant dans un conteneur avec un width CSS : la vague s'adapte à la page tout en conservant sa hauteur. Collez le SVG directement dans votre HTML, composant React ou système de templates.

<div style="width:100%"><!-- svg généré --></div>

Usages Courants

• Séparateurs entre la section hero et le bloc suivant
• Pieds de page ludiques
• Courbes d'arrière-plan animées (le path peut être animé en CSS ou SMIL)
• Formes décoratives derrière des cartes de tarifs, témoignages ou sections de fonctionnalités
• Indicateurs de chargement et transitions de section

Le path est déterministe : la même graine produit toujours la même vague, donc une fois une forme trouvée, elle reste stable. Enregistrez le SVG dans un fichier si vous devez le modifier dans un éditeur vectoriel ou ajuster les couleurs à la main.