Aller au contenu
EN

Générateur de vagues SVG

Créez des vagues SVG pour séparer les sections d'un site : couches, amplitude, style lisse, pointu ou en marches. Téléchargez le SVG ou copiez le code CSS.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Dessinez des vagues pour la transition entre deux sections d'une page : 1 à 4 couches superposées, amplitude, nombre de bosses, style lisse, pointu ou en marches, couleur et orientation. Téléchargez le fichier SVG ou copiez le code SVG ou CSS, prêt à coller.

Dans quels cas l'utiliser ?

Pages d'accueil

Une vague sous le bandeau d'accueil adoucit la transition vers le contenu et donne un style moderne.

Pieds de page

Une vague retournée au-dessus du pied de page encadre joliment le bas du site.

Visuels et présentations

Le SVG s'importe dans Figma, Canva ou PowerPoint comme forme vectorielle modifiable.

Mode d'emploi

  1. Réglez le nombre de couches, l'amplitude et le nombre de bosses.
  2. Cliquez sur « Nouvelle vague » jusqu'à trouver la bonne forme.
  3. Téléchargez le SVG ou copiez le code.

Comment ça marche

Pour chaque couche, des points sont répartis sur la largeur à des hauteurs tirées au hasard autour d'une ligne de base, puis reliés par des courbes de Bézier (style lisse), des segments (pointu) ou des marches. Les couches sont de plus en plus opaques vers l'avant.

Le hasard vient d'un générateur à graine : la même graine redonne exactement la même vague. Le code CSS encode le SVG en adresse data:, utilisable directement en image de fond.

Conseils pour un bon résultat

  • Donnez à la vague la couleur de la section suivante pour une transition invisible.
  • Une amplitude faible (20 à 40 %) et peu de bosses donnent un rendu élégant.
  • Sur mobile, réduisez la hauteur : une vague étirée sur un écran étroit paraît très pentue.
  • Les couches multiples donnent de la profondeur ; gardez-en deux ou trois.

Problèmes fréquents et solutions

Une fine ligne apparaît entre la vague et la section

Un arrondi de pixel crée un liseré. Ajoutez margin-bottom: -1px à la vague, ou display: block au SVG.

La vague est déformée sur mobile

Elle s'étire sur la largeur : réduisez sa hauteur avec une media query.

Je veux la vague dans l'autre sens

Cochez « Vague en haut » pour la placer sous un bandeau.

Questions fréquentes

Comment utiliser la vague dans mon site ?

Collez le code SVG entre deux sections, ou utilisez le code CSS fourni : il place la vague en image de fond d'un bloc séparateur, sans fichier à héberger.

La vague s'adapte-t-elle à la largeur ?

Oui : le SVG utilise preserveAspectRatio="none" et s'étire sur toute la largeur de l'écran.

Puis-je retrouver une vague ?

Oui : chaque vague vient d'une graine aléatoire enregistrée avec vos réglages ; elle reste la même à votre prochaine visite.

Le SVG est-il léger ?

Quelques centaines d'octets : bien plus léger qu'une image, et net sur tous les écrans.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.