Générateur de vagues SVG
Générez une courbe de vague SVG fluide pour séparer deux sections de page avec un rendu plus doux qu'une simple ligne droite, amplitude, fréquence et couleur entièrement réglables.
Comment ça marche
La vague est construite à partir de courbes de Bézier cubiques successives, chaque « bosse » alternant entre le haut et le bas d'une ligne de base, pour un tracé fluide sans angle. Le nombre de bosses (fréquence) et leur hauteur (amplitude) sont réglables indépendamment, ainsi que la couleur de remplissage.
Comment utiliser cette vague comme séparateur entre deux sections ?
Copiez le code SVG et placez-le en position absolue en bas (ou en haut, avec l'option « retourner ») d'une section colorée, avec une largeur à 100% : la vague viendra recouvrir la transition entre cette section et la suivante, dont la couleur de fond doit correspondre à la couleur du remplissage SVG pour un raccord invisible.
La largeur définie doit-elle correspondre exactement à la largeur de ma page ?
Non : grâce à l'attribut preserveAspectRatio="none" et à une largeur en pourcentage en CSS, le SVG s'étire pour occuper toute la largeur disponible du conteneur, même si sa largeur d'origine ne correspond pas exactement à celle de votre page.
Génération 100% locale : la courbe est calculée entièrement dans votre navigateur, sans aucun envoi de données à un serveur.