Générateur de vagues SVG

Générez des formes de vagues SVG en plusieurs couches avec une intensité de courbe, un nombre de couches et un remplissage uni ou dégradé ajustables, puis copiez le code ou téléchargez un fichier .svg.

Chargement de l'outil…

Générateur de vagues SVG — Réglez l'intensité de la courbe, choisissez le nombre de couches de vagues à empiler et optez pour un remplissage uni ou un dégradé vertical du haut vers le bas avec deux couleurs. Un aperçu en direct se redessine au fur et à mesure que vous ajustez les commandes, le bouton Régénérer réorganise la forme de la vague à partir d'une graine, et le code SVG complet est prêt à être copié ou téléchargé sous forme de fichier .svg. Tout est généré directement dans votre navigateur ; aucun réglage ni aucune image n'est jamais envoyé à un serveur.

Qu'est-ce que Générateur de vagues SVG ?

Le Générateur de vagues SVG est un outil gratuit dans le navigateur pour les webdesigners et les développeurs front-end qui veulent des séparateurs de vagues fluides et organiques et des arrière-plans hero sans dessiner les tracés à la main. Vous réglez l'intensité de la courbe, empilez de une à huit couches, retournez la vague pour que la crête pointe vers le bas ou vers le haut, et la remplissez d'un mélange d'une seule couleur ou d'un dégradé vertical entre deux couleurs HEX. Chaque vague est construite à partir d'un générateur pseudo-aléatoire basé sur une graine, si bien qu'appuyer sur Régénérer vous donne une forme inédite tout en conservant les mêmes réglages, et le résultat est un SVG exact et redimensionnable que vous pouvez coller dans n'importe quelle page HTML ou fichier de design. Utilisez-le pour des séparateurs de section, des pieds de page, des bannières et des arrière-plans décoratifs.

Comment utiliser Générateur de vagues SVG

  1. Réglez l'intensité de la courbe de 0 à 100 pour contrôler la hauteur et le caractère spectaculaire des crêtes.
  2. Choisissez le nombre de couches (1-8) ; plus de couches empilent des vagues translucides pour donner de la profondeur.
  3. Utilisez Retourner pour faire pointer la crête de la vague vers le bas ou vers le haut.
  4. Ouvrez les Réglages pour basculer entre un remplissage uni et un dégradé vertical et choisir les couleurs de début et de fin.
  5. Appuyez sur Régénérer pour réorganiser la forme de la vague jusqu'à ce qu'elle vous plaise.
  6. Copiez le code SVG ou cliquez sur Télécharger pour enregistrer un fichier wave.svg.

Exemples

Séparateur de section en dégradé

Réglez l'intensité autour de 50, gardez 3 couches, choisissez un remplissage en dégradé du bleu au violet et téléchargez wave.svg pour placer un séparateur fluide entre deux sections de page.

Vague hero monochrome bien marquée

Montez l'intensité, réglez les couches sur 1, passez à un remplissage uni et retournez la vague vers le haut pour une grande crête spectaculaire derrière un titre hero.

Fond de pied de page en couches

Utilisez 5-6 couches avec une intensité faible à moyenne pour créer une vague translucide douce et empilée qui fonctionne bien comme arrière-plan de pied de page.

Questions fréquentes

Que change l'intensité de la courbe ?
L'intensité (0-100) contrôle l'amplitude de montée et de descente de chaque crête de vague. Les valeurs faibles donnent de douces ondulations ; les valeurs élevées donnent des pics hauts et marqués. L'aperçu et le SVG se mettent à jour instantanément lorsque vous la modifiez.
Pourquoi appuyer sur Régénérer change-t-il la forme ?
Chaque vague est dessinée à partir d'un générateur pseudo-aléatoire basé sur une graine. Régénérer incrémente la graine pour obtenir une nouvelle disposition des crêtes tout en conservant exactement l'intensité, les couches, les couleurs et le remplissage que vous avez définis.
Quelle est la différence entre remplissage uni et dégradé ?
L'uni mélange chaque couche empilée entre vos deux couleurs, tandis que le dégradé applique un seul dégradé vertical de la première couleur en haut à la seconde en bas sur toutes les couches. Ouvrez les Réglages pour basculer et choisir les deux couleurs.
Comment utiliser le SVG téléchargé ?
Le résultat est un code SVG standard et redimensionnable. Copiez-le directement dans votre HTML, ou téléchargez wave.svg et importez-le dans votre outil de design ou référencez-le comme image. Étant vectoriel, il reste net à n'importe quelle taille.
Quelque chose est-il envoyé à un serveur ?
Non. La vague est générée entièrement dans votre navigateur avec des calculs locaux, et le téléchargement .svg est construit à partir d'un blob en mémoire. Aucun réglage, couleur ni image ne quitte jamais votre appareil, l'outil fonctionne donc hors ligne et garde votre travail privé.

Outils connexes

Code en image

Transformez un extrait de code en image avec coloration syntaxique dans votre navigateur, avec plus de 20 langages, des thèmes et fonds personnalisés, des numéros de ligne et un export PNG ou SVG.

Vérificateur de contraste des couleurs

Vérifiez le contraste WCAG 2.1 et le score APCA Lc entre texte et fond, voyez les badges AA, AAA et 3:1 et appliquez la couleur conforme la plus proche.

Mélangeur de couleurs

Mélangez deux couleurs HEX selon le ratio de votre choix, dans l'espace RGB ou Lab, et obtenez la couleur intermédiaire sous forme d'échantillon et de valeur HEX copiable.

Générateur de nuances de couleur

Transformez une couleur HEX de base en une échelle OKLCH, HSL ou RGB avec paliers réglables, indications de contraste WCAG par palier et export CSS, Tailwind et JSON.