Générateur d'ondes SVG | Créez des séparateurs en vague superposés avec un code prêt à coller

Générez des ondes SVG qui séparent les sections d'une page web par une courbe fluide plutôt que par une ligne droite. Réglez la hauteur de la vague, la fréquence, le nombre de couches et un dégradé deux couleurs avec les curseurs, puis copiez le code SVG ou téléchargez-le sous forme de fichier.

💡 À propos de cet outil

Vous avez sans doute vu des sites où une vague douce se place sous la zone d'en-tête ou au-dessus du pied de page. Empiler des sections rectangulaires donne un rendu rigide et anguleux, et un seul séparateur en vague adoucit l'ensemble de la mise en page. Le problème, c'est qu'écrire cette courbe à la main revient à saisir une longue liste de coordonnées path du SVG, ce qui n'est guère réaliste.

Ce générateur construit des vagues superposées, jusqu'à cinq couches, uniquement à partir des curseurs. Chaque couche reçoit une hauteur et une opacité légèrement différentes, si bien que les vagues semblent se placer les unes devant les autres et apportent de la profondeur. Le dégradé de la couleur 1 vers la couleur 2 est réparti automatiquement sur les couches, vous n'avez donc pas de teintes intermédiaires à choisir. La sortie est à la fois un SVG en ligne que vous collez directement dans votre HTML et un fichier .svg téléchargeable que vous traitez comme une image.

Lorsque vous voulez la vague sur le bord supérieur d'une section, activez l'inversion et la courbe pointe dans l'autre sens. Cela convient aux pages d'accueil, aux portfolios, aux en-têtes de blog et partout où un séparateur gagnerait à avoir un peu de mouvement.

🧐 Questions fréquentes

Comment intégrer le SVG dans mon site ? Copiez le code généré et collez-le entre les deux sections à séparer. Ajoutez width: 100% et display: block pour que la vague s'étende d'un bord à l'autre sans espace horizontal.

Est-ce que ça tient sur toutes les tailles d'écran ? Le SVG de sortie porte preserveAspectRatio="none", qui indique au navigateur d'étirer la forme pour remplir sa boîte au lieu de figer le rapport hauteur-largeur. Avec une largeur de 100%, il s'adapte aux mobiles comme aux ordinateurs de bureau automatiquement. Pour régler uniquement la hauteur verticale, redéfinissez-la avec une media query CSS.

Que change le réglage des couches ? Il fixe le nombre de vagues superposées. À 1, vous obtenez une seule vague de couleur unie ; au maximum de 5, vous obtenez cinq vagues d'opacité et de hauteur variables formant un arrière-plan plus profond.

Que se passe-t-il quand j'augmente la fréquence ? Le nombre de cycles de vague sur la largeur augmente. Une valeur basse donne de larges ondulations souples ; une valeur élevée donne des ondulations plus serrées et plus fréquentes.

Pourquoi exporter en SVG plutôt qu'en PNG ? Le SVG est un format vectoriel : il reste net une fois agrandi ou affiché sur un écran 4K. Une seule vague est légère, généralement de 1 à 2 Ko, donc elle n'affecte presque pas le chargement de la page.

📚 Comment le viewBox garde les vagues adaptatives

La première chose dans le code exporté est viewBox="0 0 largeur hauteur". Cela définit le système de coordonnées interne du SVG, indépendant de la taille d'affichage à l'écran. Cette séparation est précisément ce qui rend le comportement adaptatif possible : quand le CSS fixe la largeur à 100%, le viewBox gouverne les proportions internes du tracé tandis que preserveAspectRatio décide comment il s'étire pour s'ajuster.

La vague elle-même est une courbe sinusoïdale approchée par une longue suite de petits segments droits dans un path. La largeur est découpée en de nombreux petits pas, un point est placé à chaque pas, et les points sont reliés par des lignes. Avec un pas assez fin, l'œil la perçoit comme une courbe lisse. Plus de points donnent une courbe plus douce mais un code plus long, on emploie donc un pas qui équilibre l'apparence et le poids du fichier.