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

Générez des séparateurs de section en vagues SVG (hauteur, amplitude, fréquence, couleur), avec export.

▸Hauteur : 150▸Amplitude : 30▸Fréquence : 2▸Décalage : 0▸Couleur

▸InverserVague inversée

▸SVG

<svg viewBox="0 0 1440 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path fill="#39d353" d="M0 75.0 L0.0 75.0 L36.0 84.3 L72.0 92.6 L108.0 99.3 L144.0 103.5 L180.0 105.0 L216.0 103.5 L252.0 99.3 L288.0 92.6 L324.0 84.3 L360.0 75.0 L396.0 65.7 L432.0 57.4 L468.0 50.7 L504.0 46.5 L540.0 45.0 L576.0 46.5 L612.0 50.7 L648.0 57.4 L684.0 65.7 L720.0 75.0 L756.0 84.3 L792.0 92.6 L828.0 99.3 L864.0 103.5 L900.0 105.0 L936.0 103.5 L972.0 99.3 L1008.0 92.6 L1044.0 84.3 L1080.0 75.0 L1116.0 65.7 L1152.0 57.4 L1188.0 50.7 L1224.0 46.5 L1260.0 45.0 L1296.0 46.5 L1332.0 50.7 L1368.0 57.4 L1404.0 65.7 L1440.0 75.0 L1440 150 L0 150 Z"/>
</svg>

🔒 100 % côté client — aucune donnée envoyée

Créez des séparateurs de section en vagues SVG pour vos pages : réglez la hauteur, l'amplitude, la fréquence, le décalage et la couleur, puis copiez ou téléchargez le SVG. Idéal pour habiller la transition entre deux sections. Tout est généré localement.

À quoi ça sert ?

▸ Séparer deux sections d'une landing page
▸ Créer une transition ondulée en haut ou en bas d'un bloc
▸ Générer un fond décoratif léger
▸ Exporter un SVG fluide (100% largeur)

FAQ

Comment intégrer la vague dans ma page ?

Collez le SVG directement dans votre HTML, ou utilisez-le comme image de fond. L'attribut preserveAspectRatio permet un étirement plein largeur.

À quoi servent amplitude et fréquence ?

L'amplitude règle la hauteur des vagues, la fréquence le nombre d'ondulations sur la largeur.

Puis-je changer la couleur après coup ?

Oui, modifiez l'attribut fill du path dans le SVG, ou la couleur ici avant l'export.

Le SVG est-il libre d'utilisation ?

Oui, le SVG généré vous appartient et s'intègre sans restriction.

Outils liés

Ratio d’aspect · calculateur Calculez un ratio d’aspect (16:9…) et déduisez une dimension proportionnelle manquante. Générateur de code-barres Générez un code-barres (EAN-13, Code128, UPC) à partir d’une valeur, téléchargeable, dans le navigateur. Base64 → image Décodez une data URI ou du Base64 en image affichée et téléchargeable, dans le navigateur. Border-radius CSS · générateur Créez des coins arrondis CSS (border-radius) avec aperçu en direct et code à copier. Box-shadow CSS · générateur Générez une ombre portée CSS (box-shadow) avec aperçu en direct et code à copier. Fond vert → transparent Rendez transparente une couleur de fond (fond vert/bleu) d’une image et exportez un PNG, dans le navigateur.