Générateur d'Ondes SVG
Générez des séparateurs de vague SVG pour les transitions entre sections.
① Personnalise hauteur, amplitude et couleur ② Aperçu en direct ③ Copie SVG ou snippet HTML
Hauteur (px) 120
Amplitude (px) 40
Vagues 2
Couleur vague
#C9B89A
Arrière-plan
#0E0E0E
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" width="100%" preserveAspectRatio="none">
<path d="M 0 60 Q 180 20 360 60 Q 540 100 720 60 Q 900 20 1080 60 Q 1260 100 1440 60 L 1440 120 L 0 120 Z" fill="#c9b89a"/>
</svg>
Que sont les séparateurs de vague SVG et comment les utiliser ?
Les séparateurs de vague SVG sont des graphiques vectoriels scalables pour des transitions fluides entre sections. Contrairement aux PNG/JPG, les vagues SVG sont indépendantes de la résolution et s'adaptent parfaitement à toutes les tailles d'écran. La forme de la vague est définie par un élément <path> dans un <svg> utilisant des courbes de Bézier quadratiques (commande Q). L'attribut preserveAspectRatio="none" garantit que la vague occupe toujours toute la largeur.
Questions fréquentes
Un séparateur de vague SVG est un graphique vectoriel scalable utilisé comme diviseur visuel entre sections. C'est une forme remplie avec un bord supérieur courbe qui scale parfaitement.
Copiez le snippet HTML et collez-le en bas d'une section. Utilisez width="100%" et preserveAspectRatio="none" pour l'adapter à toute largeur.
L'amplitude contrôle la hauteur des pics. Valeurs typiques : 20px (subtil) à 80px (dramatique).
La fréquence contrôle le nombre de vagues complètes. 1 = courbe S douce, 2–3 = motif typique, 4+ = nombreuses petites vagues.
Les courbes douces (bezier quadratique) sont le choix le plus courant. Les angulaires créent un effet géométrique cristallin.
Le toggle retourne la vague verticalement. Normal = zone remplie en bas. Retourné = zone remplie en haut.
Oui. Appliquez une animation CSS avec translateX() sur un viewBox plus large. Doublez la largeur du viewBox à 2880 et répétez le chemin.