Générateur de vagues SVG

Par Bogdan Sandu (EN) · Publié 13 octobre 2025 · Dernière mise à jour 14 septembre 2026

Ce générateur de vagues SVG crée des arrière-plans de vagues superposées pour les sections d’introduction, les séparateurs de sections et les cartes, puis fournit le code SVG. Chaque couche est un tracé distinct que vous contrôlez avec des curseurs. Aucun logiciel de design n’est nécessaire et aucune donnée ne quitte votre navigateur.

Ce que vous pouvez définir :

• Canvas : largeur de 400px à 2000px, hauteur de 200px à 800px, et une couleur de fond
• Par couche : type d'onde (sinus, triangle, dent de scie ou carré), amplitude 10 à 100, longueur d'onde 50 à 500, phase 0 à 360, opacité et couleur
• Couches sinusoïdales uniquement : fréquence 0.5 à 3 et variation 0 à 0.8, qui détournent la courbe d'un sinus propre
• Dégradé : un remplissage linéaire ou radial optionnel par calque, de la couleur du calque à une deuxième couleur
• Presets : Hero Section, Mint Fresh, Sunset Glow, Deep Ocean, Lavender Dreams, et Coral Reef, plus un bouton Randomize

Ajoutez autant de couches que vous le souhaitez et supprimez n'importe laquelle d'entre elles. L'aperçu se redessine à chaque modification.

Comment utiliser ce générateur de vagues SVG

1. Commencez à partir d'un préréglage, ou cliquez sur Aléatoire jusqu'à ce que quelque chose soit proche de ce que vous voulez.
2. Définissez la largeur et la hauteur de la toile pour correspondre à la section dans laquelle la vague se trouvera. La sortie utilise un viewBox, donc ces nombres définissent les proportions, pas la taille finale des pixels.
3. Réglez chaque couche. Réduisez l'opacité des calques arrière et gardez le calque avant proche de l'opacité pour plus de profondeur.
4. Choisissez une exportation : Copier le code SVG ou Télécharger le SVG pour le vecteur, ou ouvrez Exporter pour PNG, React et CSS.

Le SVG commence comme ceci avec le preset Hero Section :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none">
  <defs>
    <linearGradient id="wg-gradient-0" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1200" height="400" fill="#0f172a" />
  <path d="M 0,400 L 0,200 L 10,213.16 L 20,224.98 …" fill="url(#wg-gradient-0)" opacity="0.15" />
  …
</svg>

Trois choses dans ce balisage ont de l'importance une fois qu'il est sur une page :

• preserveAspectRatio="none" permet à l'onde de s'étirer à n'importe quelle largeur et hauteur de conteneur. Supprimez-le si vous voulez que les proportions soient verrouillées.
• Le <rect> est l'arrière-plan du canevas. Supprimez-le pour obtenir une vague transparente placée sur la couleur de votre propre section.
• Chaque chemin est une série de segments L droits échantillonnés tous les 10px, pas une courbe de Bézier. Aux tailles normales, il semble lisse, mais à de très grandes largeurs sur une toile courte, vous pouvez voir les facettes.

Pour utiliser la vague comme séparateur de section, déposez le SVG au bas de la section et donnez-lui une largeur fluide :

.hero svg {
  display: block;
  width: 100%;
  height: 160px;
}

Options d'exportation

• PNG à 800×600, 1920×1080, 3840×2160, ou une taille personnalisée. Cela rasterise la vague, alors utilisez-la pour les e-mails, les images sociales ou les outils qui rejettent le SVG intégré.
• React copie un petit composant qui injecte la chaîne SVG avec dangerouslySetInnerHTML. Il s'agit d'un wrapper, pas d'un composant paramétrique, donc éditez le SVG ici plutôt que par des props.
• CSS copie une règle .wg-waves-background avec le SVG comme URI de données base64, en utilisant background-size: cover.

Ce que l'outil ne fait pas

• Il ne s'anime pas. La sortie est un SVG statique. Voir la section ci-dessous pour les options CSS et SMIL.
• Il écrit les dégradés et les couleurs comme des attributs style et fill en ligne. Certains éditeurs CMS suppriment les styles intégrés lors du collage, auquel cas les remplissages sont déplacés vers une feuille de style.
• Une onde à trois couches représente environ 10 Ko de données de chemin en raison de l'échantillonnage de 10 pixels. Exécutez le fichier via SVGO (EN) si la taille est importante.

Qu'est-ce qu'un générateur de vagues SVG

Un générateur d'ondes SVG est un outil basé sur un navigateur qui transforme les entrées de hauteur, de fréquence et de couche en une forme d'onde prête à l'emploi.

Il sort cette forme comme SVG (EN) chemin de code, le même format vectoriel utilisé pour les icônes et les logos sur le web.

Aucun dessin de Bézier requis. Vous déplacez quelques curseurs, cliquez sur un bouton, et l'outil écrit la courbe pour vous.

Ce qu'il n'est pas :

• Pas une application d'illustration complète pour les formes organiques complexes
• Pas un truc CSS seulement construit à partir de border-radius ou un pseudo-élément
• Pas une bibliothèque statique d'images d'ondes pré-fabriquées

Get Waves (EN), l'un des premiers outils et toujours le plus copié dans cette catégorie, maintient l'ensemble du flux de travail à trois mouvements. Choisissez un style de forme, faites glisser deux ou trois curseurs, cliquez sur l'icône en forme de dé pour une variation aléatoire.

La plupart des générateurs gardent cela derrière une simple interface visuelle (EN), donc personne n'a besoin d'un éditeur de code ou d'une application vectorielle juste pour obtenir une courbe utilisable.

Comment un générateur d'ondes SVG construit la forme d'onde

Chaque onde produite par un générateur se résume à une seule chose : une chaîne de coordonnées à l'intérieur de l'attribut d d'un élément de chemin.

Les curseurs d'amplitude et de fréquence ne touchent pas directement la courbe. La plupart des outils déplacent les points de contrôle d'une série de segments cubiques de Bézier et laissent le navigateur tracer une ligne lisse entre eux. Ce générateur échantillonne la fonction d'onde tous les 10px et joint les points avec des segments droits à la place.

Chiffres clés :

• L’utilisation des images SVG a augmenté de 16% d’une année sur l’autre en 2022, selon le HTTP Archive Web Almanac (EN)
• La plupart des générateurs utilisent par défaut un canevas de 1440 par 320 pixels, correspondant aux largeurs de point d'arrêt courantes du bureau. Celui-ci commence à 1200 par 400
• La lisse des courbes sur la plupart des outils est définie avec un seul contrôle Bézier cubique par segment, pas un éditeur de nœud complet

Un attribut viewBox (EN) définit l'espace de coordonnées dans lequel se trouve l'onde, indépendamment de la taille de l'élément sur la page.

C'est ce qui rend une échelle d'onde générée propre au lieu de pixeliser comme une exportation raster.

Le bouton "shuffle" ou "randomize" de la plupart des outils est livré avec une petite routine JavaScript (EN) qui choisit de nouvelles valeurs pour chaque curseur à la fois. Certains outils l'ensement de sorte que la même graine reproduise la même courbe. Celui-ci ne le fait pas, alors copiez le code lorsque vous atterrissez sur une forme que vous aimez.

Générateur de vagues SVG vs codage d'une vague à la main

Un générateur gagne sur la vitesse. Le codage manuel gagne sur la précision.

C'est l'échange que la plupart des équipes pesent réellement, pas "quel est le meilleur" dans l'abstrait.

Générateur, les avantages :

• Courbe utilisable en moins d'une minute
• Aucun calcul de Bezier requis
• Fonctionne pour les membres d'équipe non techniques

Générateur, les inconvénients :

• Les courbes correspondent rarement à une forme de marque exacte au premier essai
• Contrôle limité sur le placement des points individuels
• Les options de style s'arrêtent là où s'arrêtent les presets de l'outil

Le codage manuel, les pros :

• Contrôle complet point par point sur la courbe
• Peut correspondre exactement à une maquette spécifique ou à la courbure de la marque
• Pas de dépendance à un outil tiers restant en ligne

Codage à la main, inconvénients :

• Lent si vous n'êtes pas déjà à l'aise avec les courbes de Bézier
• Facile à introduire un chemin brisé ou une forme non fermée
• Cela signifie généralement ouvrir un éditeur vectoriel pour une seule forme

Les équipes avec un système de conception strict, où la vague doit s’ajuster à une courbure spécifique du logo, ont tendance à ajuster manuellement le chemin une fois et à le réutiliser partout. Tout le monde atteint pour un générateur d'abord. Ils n'ouvrent un éditeur (EN) que si la sortie a besoin d'être modifiée par la suite.

Une vague générée passe toujours par CSS (EN) normal pour la couleur de remplissage et le positionnement une fois qu'elle est sur la page. L'étape de "codage manuel" est souvent juste des retouches, pas une reconstruction complète.

Meilleurs générateurs de vagues SVG comparés

Quatre outils couvrent la plupart de ce que les gens recherchent quand ils veulent une vague sans écrire les données de chemin à la main.

Évitez complètement le nommage et la création manuelle de fichiers (EN) : chaque outil de ce tableau génère un fichier de travail pour vous et vous permet de copier le code directement dans un projet.

Haikei regroupe les vagues avec une douzaine d'autres générateurs, y compris le mode d'ondes superposées, et garde les ensembles de formes les plus avancés derrière un niveau payant.

SVGwave mérite d'être mentionné pour une autre raison. Il a été construit par un développeur alors âgé de 12 ans, Bereket Semagn, et se tient toujours comme l'une des options gratuites les plus flexibles pour empiler plusieurs couleurs d'onde.

Shape Divider échange la flexibilité pour la simplicité. Une forme, une exportation, CSS apparié inclus, ce qui est souvent exactement suffisant pour un séparateur de section qui n'a pas besoin de superposition.

Le choix entre une exportation SVG ou PNG (EN) brute est important ici aussi. Des solutions de rechange PNG existent principalement pour les anciens clients de messagerie ou les outils de conception qui étouffent le code vectoriel en ligne.

Contrôles de superposition, de couleur et de dégradé dans un générateur de vagues SVG

La profondeur dans un graphique en ondes provient de l'empilement, pas de la courbe elle-même.

Une seule onde plate ressemble à une forme. Trois ou quatre couches semi-transparentes, chacune légèrement décalée, commencent à ressembler à de l'eau.

Empilement de plusieurs couches d'ondes

Comment la superposition fonctionne :

• Chaque calque est son propre élément de chemin, empilé dans l'ordre z naturel du SVG
• Les chemins ultérieurs dans le balisage s'affichent par-dessus les chemins précédents
• L'opacité est généralement réduite sur les calques arrière pour fausser la distance

La plupart des générateurs limitent la plage utile à quatre ou cinq couches. Au-delà de cela, les courbes se chevauchent tellement que les couches supplémentaires cessent de se lire comme des formes distinctes. Cet outil n'a pas de capuchon rigide, mais la même limite s'applique à l'œil.

Appliquer des remplissages dégradés et de l’opacité

Une couleur de remplissage plate se lit comme plate. Un remplissage dégradé se lit comme de la lumière frappant l'eau, c'est pourquoi la plupart des générateurs en utilisent un par défaut.

Les arrêts de dégradé (EN) ont besoin d'au moins deux couleurs et d'une direction, et obtenir cette association correcte à l'œil nu est plus lent qu'il n'y paraît. Ici, chaque calque a une couleur de dégradé associée à sa couleur de base, allant de haut en bas pour linéaire ou du centre pour radial.

Si vous créez le remplissage séparément de la forme d'onde elle-même, un outil dégradé (EN) dédié vous permet d'atteindre plus rapidement des couleurs d'arrêt qui correspondent au reste de la page.

L'opacité sur les calques dégradés se comporte différemment de l'opacité sur les remplissages plats : réduisez trop l'opacité sur un dégradé et la transition de couleur disparaît avant la forme.

Rendre une vague SVG générée réactive

Une vague construite à une largeur de pixel fixe se brise au moment où l'écran devient plus étroit.

Le correctif est déjà intégré dans SVG. L'attribut viewBox plus une largeur basée sur un pourcentage permet au navigateur de redimensionner la courbe en fonction du conteneur dans lequel elle est déposée.

Selon StatCounter Global Stats (EN), les appareils mobiles représentaient 49,4% du trafic de sites Web dans le monde en août 2026, à égalité avec les ordinateurs de bureau à 49,1%.

Cette division est à elle seule une raison suffisante pour vérifier comment une vague se comporte en dessous de 480 pixels de largeur, pas seulement à la taille du bureau.

Réglages de réactivité communs :

• preserveAspectRatio (EN) pour garder les proportions de la courbe intactes, ou none, comme cet outil le fait, pour laisser l'onde s'étirer
• Une hauteur fixe en pixels associée à une largeur fluide basée sur un pourcentage
• Une règle de hauteur minimale afin que la vague ne s'aplatisse pas en une ligne droite sur les petits écrans

Les requêtes média (EN) viennent pour les cas extrêmes qu'un SVG fluide ne peut pas gérer seul. L'habituel est d'échanger dans une hauteur d'onde plus courte une fois que la fenêtre de visualisation tombe en dessous d'un point d'arrêt de tablette.

Il s'agit d'une pratique standard de design réactif (EN) appliquée à un graphique spécifique, et non d'une technique spéciale SVG uniquement.

Animer une vague SVG

Une onde statique reste immobile. Un animé se déplace de gauche à droite dans une boucle, ce qui est plus proche de la façon dont l'eau se déplace. Le générateur ci-dessus génère du SVG statique, l'animation est donc une étape que vous ajoutez ensuite.

Deux méthodes s'occupent de cela, et elles ne se chevauchent pas beaucoup dans la pratique.

Animation CSS Keyframe

La plupart des implémentations déplacent la propriété de transformation du chemin d'avant en arrière en utilisant des images clés CSS (EN) standard, en bouclant l'animation à l'infini.

L'astuce pour une boucle propre est de dupliquer la forme d'onde à double largeur, puis d'animer exactement une largeur de forme de mouvement horizontal afin que la couture soit invisible.

Si vous vous trompez de quelques pixels, la boucle saute visiblement à chaque cycle. C'est l'une des erreurs les plus courantes dans l'animation SVG avec CSS (EN), et facile à manquer jusqu'à ce que vous regardiez la boucle pendant plus de quelques secondes. Le générateur d’animations CSS par images clés écrit les images clés pour vous.

SMIL Animation

SMIL (EN) est la méthode d'animation SVG native, écrite directement à l'intérieur du balisage XML (EN) de SVG en utilisant un élément animate.

Chrome a proposé d’abandonner le support SMIL en 2015, puis a renversé la tendance en 2016 après le rejet des développeurs sur les remplacements manquants.

Statut actuel : L'animation SMIL SVG est de base largement disponible, ce qui signifie que tous les principaux navigateurs la prennent désormais en charge sans polyfill.

La plupart des développeurs utilisent toujours les images clés CSS en premier de toute façon. Une meilleure familiarité avec les outils, un débogage plus facile dans les outils de développement du navigateur et aucune syntaxe distincte à retenir.

SMIL gagne toujours dans un cas spécifique : animer les données de chemin d'une forme elles-mêmes, et pas seulement sa position. CSS ne peut le faire que là où la propriété d est prise en charge, ce qui est encore inégal d'un navigateur à l'autre.

Comment ajouter une vague SVG générée à un site Web

Obtenir une vague générée sur une page prend l'une des quatre routes, en fonction de la pile dans laquelle vous travaillez.

Choisissez en fonction du degré de contrôle dont vous avez besoin sur la forme après son placement, et non pas simplement de ce qui est le plus rapide à copier. Le panneau Exporter ci-dessus couvre les trois premiers.

1. Copiez le code SVG directement à partir du générateur et collez-le en ligne dans votre balisage HTML (EN), juste à l'endroit où le séparateur doit être placé.
2. Téléchargez le fichier à la place et référez-le comme une image d'arrière-plan CSS, en utilisant background-size : cover pour remplir le conteneur.
3. Installez un composant wave en tant que package npm si vous travaillez dans React ou Vue, plutôt que de gérer manuellement les chaînes de chemin brutes.
4. Exportez directement à partir d'un plug-in Figma lorsque la vague doit vivre à l'intérieur d'un fichier de conception avant d'atteindre le code.

Inline versus background image : Le SVG inline vous permet de cibler le chemin avec CSS ou JavaScript plus tard (pour les changements de couleur, les états de survol, l'animation). Une image d'arrière-plan est plus simple, mais verrouille le style de la forme au moment de l'exportation.

Le composant react-wavify (EN) sur GitHub a récolté plus de 360 étoiles, ce qui indique à peu près combien d'équipes préfèrent installer un paquet plutôt que de câbler à la main l'intégration SVG elles-mêmes.

Certaines plateformes ne peuvent pas afficher correctement le code vectoriel en ligne, comme certains clients de messagerie ou d'anciens thèmes CMS. Là, la convertir en PNG (EN) évite d'abord une mise en page cassée.

Quand un générateur de vagues SVG ne fonctionne pas bien

Un générateur gagne son maintien sur la vitesse, pas sur la précision.

Trois situations poussent régulièrement les gens vers le codage manuel ou un outil complètement différent.

Courbure de verrouillage de marque :

• Un logo ou une forme de mascotte doit être affleurant contre la vague avec un alignement exact au pixel près
• Les directives de conception spécifient un rapport de courbure auquel aucun préréglage du générateur ne correspond

Le texte placé sur un fond vague décoratif pose un vrai problème. Le texte à faible contraste est l'échec d'accessibilité le plus courant que WebAIM (EN) trouve, présent sur 83,9% des pages d'accueil du premier million dans son rapport 2026.

La règle de contraste de WCAG (EN) exige au moins un rapport 4.5 :1 entre le texte et son arrière-plan. Une vague de dégradé occupée peut tranquillement échouer, même si elle semble bien au designer qui a choisi les couleurs.

Empiler quatre ou cinq calques animés sur un téléphone à faible consommation d'énergie est l'endroit où les performances, pas l'esthétique, décident du résultat. Chaque tracé animé supplémentaire ajoute un coût de repeinture, et les anciens GPU mobiles se sentent plus rapides que les ordinateurs de bureau.

Les illustrations organiques complexes, les coups de pinceau texturés ou les scènes avec des dizaines de formes distinctes sont en dehors de ce pour quoi tout générateur spécifique aux ondes est conçu. C'est le territoire des blobs ou des outils d'illustration complets. Pour une forme découpée plutôt qu'une vague remplie, le Clip Path Generator est l'ajustement le plus proche.

Rien de tout cela ne fait de l'outil un mauvais choix en général. Cela signifie simplement que la vague décorative cesse d'être le bon appel une fois que l'accessibilité (EN) ou la correspondance exacte de la marque entrent en jeu. Contrast (EN) vérification devient la peine de faire avant l'expédition.

Problèmes courants après l'exportation d'une vague SVG

La plupart des problèmes d'exportation sont dus à l'une des quatre causes suivantes, et toutes les quatre sont faciles à vérifier avant que les navires ne décollent.

Le problème de viewBox mérite sa propre mention. L'optimiseur de SVGO avait l'habitude de le dépouiller par défaut via un plugin appelé removeViewBox. Assez de développeurs ont signalé une mise à l'échelle brisée que les responsables ont ouver une requête de tirage pour la désactiver (EN).

Les différences de rendu entre les navigateurs apparaissent également, généralement dans la façon dont les dégradés ou l'opacité s'empilent lorsque plusieurs calques d'ondes se chevauchent.

Tester la vague exportée pour la compatibilité entre les navigateurs (EN) capture la plupart de ceux-ci avant qu'un client ou un collègue ne le fasse.

Une valeur par défaut supplémentaire à connaître : preserveAspectRatio (EN) est une ligne de base largement disponible et sa valeur par défaut est xMidYMid meet, sauf si vous la définissez autrement. Ce générateur le définit sur none.

Une onde qui semble légèrement décentrée après l'exportation est généralement cette valeur par défaut faisant exactement ce qu'elle est censée faire, pas un bug.

Les ondes purement décoratives qui ne contiennent aucune information devraient rester entièrement en dehors de l'arbre d'accessibilité. Ajoutez aria-hidden="true" au SVG en ligne. Les utilisateurs de lecteurs d'écran n'ont pas besoin d'entendre "image" annoncé pour une forme qui n'est qu'une texture visuelle, ce qui est le genre de lacunes couvertes dans les guides sur faire des fichiers SVG accessibles (EN).

Questions fréquentes : Générateur de vagues SVG

Quelle est la différence entre une vague SVG et une vague CSS uniquement ?

Une vague CSS-only forme un pseudo-élément avec border-radius ou clip-path directement en HTML et CSS, sans balisage vectoriel impliqué. Une onde SVG utilise des données de chemin réel, une courbe de Bézier ou une polyligne échantillonnée, ce qui permet un contrôle plus précis de l'amplitude et de la fréquence.

Qu'est-ce qu'un diviseur d'ondes par rapport à un générateur d'ondes SVG ?

Un séparateur de vague est la forme finie située entre deux sections de page. Un générateur d'onde SVG est l'outil qui le produit. Il affiche le code de chemin et viewBox qui font que la forme s'adapte correctement aux différentes tailles d'écran.

Existe-t-il une réelle différence entre les générateurs gratuits et payants ?

Les niveaux gratuits limitent généralement le nombre de couches, la variété de formes ou la résolution d’exportation. Les niveaux payants, comme le ensemble générateur professionnel de Haikei, débloquent davantage de catégories de formes et des exportations PNG à plus haute résolution. Un diviseur d’onde unique en a rarement besoin, et ce générateur est gratuit et sans plafond.

Les générateurs d'ondes SVG fonctionnent-ils avec les composants React ou Vue ?

Oui, oui. Plusieurs composants open-source enveloppent les données de chemin générées dans un composant React ou Vue, exposant des props pour la couleur de remplissage, l'amplitude et la vitesse d'animation. L’exportation React ci-dessus est plus simple : un composant qui rend la chaîne SVG telle quelle.

Les ondes SVG ralentissent-elles la vitesse de chargement de la page ?

Rarement. Un seul chemin d'onde dessiné à la main est typiquement de quelques centaines d'octets, et une onde à trois couches de cet outil est d'environ 10 Ko. Les deux sont beaucoup plus légers qu'une image de fond JPEG ou PNG. Le poids de la page ne devient une préoccupation qu'une fois que plusieurs calques animés s'empilent sur une page déjà lourde.

Une vague exportée peut-elle être modifiée ultérieurement dans Figma ou Illustrator ?

Oui, oui. Les deux acceptent le code SVG collé ou un fichier importé, et le chemin reste entièrement modifiable en tant que points vectoriels. Illustrator convient aux modifications précises des points d'ancrage, tandis que Figma fonctionne mieux pour les changements rapides de couleur et de calque.

Où devriez-vous d'abord tester la sortie d'un générateur d'ondes SVG ?

La sortie d'un générateur d'ondes SVG mérite d'être vérifiée d'abord sur un écran de téléphone, pas sur un écran de bureau. Les appareils mobiles rendent l'onde à la largeur de fenêtre la plus étroite, où les erreurs de mise à l'échelle apparaissent le plus rapidement et le plus visiblement.

Trois contrôles comptent, dans l'ordre.

• Mise à l'échelle de ViewBox à des largeurs étroites
• Contraste du texte sur le remplissage
• Douceur d'animation sur un téléphone

Une viewBox cassée détruit la mise en page, un faible contraste bloque la lecture et une animation saccadée ne fait qu'atténuer l'impression. Le détartrage vient en premier et le polissage vient en dernier.

Global Stats de StatCounter place le mobile à 49,4% du trafic mondial de sites Web en août 2026, à égalité avec le bureau. La moitié des personnes qui voient une vague générée la voient d'abord sur la fenêtre de visualisation étroite où un contrôle manqué brise la disposition. Le pass mobile s'associe bien avec une liste de contrôle d'accessibilité web (EN) complète avant l'expédition de la page.