Générateur de vagues SVG

Des vagues SVG superposées pour des mises en page modernes

Les séparateurs en forme de vague sont un moyen apprécié d'adoucir la frontière entre deux sections d'une page web. Au lieu d'une ligne horizontale rigide, un bord incurvé apporte du mouvement et de la profondeur aux bannières d'accueil, aux pieds de page, aux tableaux de tarifs et aux pages de destination. Ce générateur de vagues SVG crée ces formes pour vous. Il empile plusieurs calques translucides ou opaques, chacun avec sa propre courbe aléatoire, et les fond entre deux couleurs pour que le résultat évoque des collines ondulantes ou de l'eau.

Comme la sortie est du SVG pur, elle reste nette à toutes les tailles, ne pèse que quelques centaines d'octets et peut être stylée, animée ou intégrée directement dans votre HTML. Vous pouvez aussi la copier sous forme d'URI de données CSS background-image, ce qui est pratique lorsque vous ne pouvez pas ajouter de fichiers supplémentaires à un projet.

Ce que modifient les réglages

Calques définit le nombre de vagues superposées dessinées, d'une seule courbe épurée jusqu'à six bandes empilées. Amplitude contrôle la hauteur des crêtes et des creux. Complexité correspond au nombre de crêtes sur toute la largeur : des valeurs faibles donnent une longue houle paresseuse, des valeurs élevées une mer agitée. Lissage contrôle la façon dont les points sont reliés : à 0 %, la vague est anguleuse comme un zigzag ; à 100 %, elle devient une courbe arrondie composée de segments de Bézier cubiques. Le remplissage peut être un mélange de deux couleurs unies, une par calque, ou un dégradé horizontal dont l'opacité augmente vers l'avant.

Utiliser et exporter votre vague

Chaque vague est générée à partir d'une graine numérique, si bien qu'un design est entièrement reproductible : notez la graine et les valeurs des curseurs, et vous pourrez le recréer plus tard. Utilisez Flip vertically pour les vagues qui pendent depuis le haut d'une section, et activez un arrière-plan transparent lorsque le SVG doit se superposer à une autre couleur. Téléchargez le SVG pour le web, ou exportez un PNG de 1440 × 480 pixels pour vos présentations et outils de design. Lorsque vous placez le SVG dans une page, étirez-le sur toute la largeur et donnez à l'arrière-plan de la section la même couleur que le fond de la vague pour éviter de fines lignes de raccord. Tout est calculé localement dans votre navigateur : aucun envoi, aucun compte.