Design / SVG

Générateur de vagues SVG pour séparateurs de sections

Générez des vagues SVG fluides et superposées pour la bordure entre deux sections de page : choisissez le nombre de couches et de vagues, la hauteur, la fluidité et la couleur, puis téléchargez le SVG ou copiez-le comme arrière-plan CSS.

Générateur de vagues SVG pour séparateurs de sections: Chaque couche est une rangée de points qui alternent au-dessus et au-dessous d’une ligne de base, selon une amplitude aléatoire. Les points sont reliés par une courbe fluide, puis la forme est remplie jusqu’au bord inférieur. Les couches situées à l’arrière sont plus pâles, ce qui crée une impression de profondeur. Le SVG s’adapte à toutes les largeurs, tandis que la version CSS l’intègre comme arrière-plan via une URI de données. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie: Outils développeur
Exécutions: Dans votre navigateur
Coût: Gratuit · sans inscription
Disponibilité: Prêt à l'emploi

Générateur de vagues SVGTraitement local

Fonctionne entièrement dans votre navigateur

Calques3Nombre de vagues3Hauteur des vagues60%Lissage1Hauteur de l’image240 pxCouleur#479d1d Retourner verticalement (pour le haut d’une section)

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

Le SVG s’étire sur n’importe quelle largeur (preserveAspectRatio="none"), ce qui le rend adapté aux séparateurs de section pleine largeur. Placez-le en bas d’une section, avec la couleur d’arrière-plan de la section suivante, ou retournez-le pour le placer en haut. La même graine aléatoire produit toujours la même vague.

SVG ou CSS ?

Un SVG intégré peut être stylisé et animé avec CSS, et son remplissage peut utiliser currentColor. Comme arrière-plan CSS, le SVG est une URI de données : rien de plus à charger, mais la couleur est fixée dans le code. Le fichier ne fait que quelques centaines d’octets dans les deux cas ; vous pouvez encore le nettoyer avec le nettoyeur SVG.

Lissage

La courbe est une spline de Catmull-Rom convertie en segments de Bézier cubiques : avec un lissage maximal, elle passe doucement par chaque point ; à zéro, elle devient une succession de lignes droites entre les points, formant un bord montagneux irrégulier.

Comment l'utiliser

Définissez le nombre de couches, le nombre de vagues et leur hauteur.
Choisissez une couleur et inversez la vague pour le haut d’une section.
Cliquez pour générer de nouvelles vagues aléatoires, puis téléchargez le SVG ou copiez le CSS.

Confidentialité et limitations

Les vagues sont dessinées dans votre navigateur.

Outils associés

Questions fréquentes

Comment l’utiliser entre deux sections ?

Donnez à la vague la couleur de la section située en dessous et placez-la en bas de la section située au-dessus, sur toute sa largeur. Inversez-la pour l’utiliser en haut d’une section.

Les mêmes réglages produisent-ils toujours la même vague ?

Oui : la forme est générée à partir d’une graine aléatoire. Elle ne change donc que lorsque vous cliquez pour créer une nouvelle vague.

Puis-je utiliser ces vagues à des fins commerciales ?

Oui : les formes sont générées pour vous et ne sont soumises à aucune restriction de licence.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis