Générateur de Vagues SVG
Générateur de vagues SVG gratuit en ligne : empilez 1 à 5 couches de vagues lisses, réglez ligne de base, amplitude, longueur d'onde et lissage, appliquez un dégradé bicolore et exportez le code vectoriel.
Que fait le générateur de vagues SVG ?
Il crée des formes de vagues décoratives sous forme de code SVG prêt à l'emploi. Vous pouvez empiler de 1 à 5 couches, chacune avec sa hauteur de ligne de base, son amplitude, sa longueur d'onde et son lissage, et les remplir toutes avec un dégradé linéaire bicolore partagé.
Comment les courbes sont-elles tracées ?
Chaque couche est produite par un générateur de chemin intégré : la vague est découpée en segments d'une demi-longueur d'onde et chaque segment est tracé avec des points de contrôle Bézier cubiques. Le fichier reste minuscule et parfaitement lisse à tout zoom.
Que change le curseur de lissage ?
À 0 %, les segments deviennent des lignes droites et la vague ressemble à un zigzag. En l'augmentant, les points de contrôle Bézier s'écartent et à 100 % vous obtenez des courbes sinusoïdales complètes.
Où utiliser le SVG exporté ?
Partout où du HTML ou du SVG est accepté : fonds de héros, séparateurs entre sections, pieds de page, présentations et outils de design. Collez le code copié directement dans votre HTML ou enregistrez le fichier .svg via le bouton de téléchargement.
La vague reste-t-elle nette à toute taille ?
Oui. L'export conserve un viewBox de 1440x480 : le graphique est de la géométrie vectorielle pure. Étirez-le à 100 % de la largeur de page ou agrandissez-le pour l'impression, les courbes ne se floutent jamais.
Comment fonctionne le bouton Aléatoire ?
Il choisit un nombre de couches entre 1 et 5, de nouvelles valeurs aléatoires pour chaque paramètre et deux couleurs harmonieuses, puis redessine l'aperçu instantanément. Appuyez autant de fois que nécessaire.
Puis-je utiliser les couleurs de ma marque ?
Oui. Les deux sélecteurs de couleur définissent le début et la fin du dégradé linéaire partagé par toutes les couches : les modifier recolore tout le groupe de vagues d'un coup.
Des données sont-elles envoyées à un serveur ?
Non. Le générateur tourne entièrement dans votre navigateur en JavaScript pur. Vos couleurs et réglages ne quittent jamais la page et le fichier exporté est créé localement sur votre appareil.
Comment utiliser Générateur de Vagues SVG
Le générateur de vagues SVG crée des formes de vagues superposées sous forme de code SVG propre, prêt à coller. Chaque couche est une courbe cubique de Bézier lisse remplie d'un dégradé linéaire bicolore partagé, ce qui la rend parfaite pour les fonds de section héro, les séparateurs de page et les décorations de pied de page. Tout est généré dans votre navigateur — rien n'est envoyé.
- Choisissez le nombre de couches (1-5) dans le sélecteur Couches. Les couches sont dessinées de l'arrière vers l'avant, donc chaque nouvelle couche peint par-dessus les précédentes.
- Choisissez les couleurs de début et de fin du dégradé avec les deux sélecteurs de couleur — toutes les couches partagent ce dégradé linéaire.
- Réglez chaque couche avec ses quatre curseurs : la hauteur de ligne de base déplace la vague vers le haut ou le bas, l'amplitude définit la hauteur des crêtes, la longueur d'onde contrôle la distance horizontale entre les crêtes, et le lissage va des lignes zigzag droites (0%) aux courbes sinusoïdales complètes en Bézier cubique (100%).
- Appuyez sur Randomiser pour générer instantanément une combinaison neuve de nombres de couches, de formes et de couleurs jusqu'à ce que quelque chose paraisse juste.
- Appuyez sur Télécharger SVG pour enregistrer un fichier .svg, ou Copier le code pour mettre le balisage SVG complet dans votre presse-papiers, prêt à coller dans n'importe quel fichier HTML ou outil de design.
Pour les séparateurs de sections web, placez le SVG entre deux blocs et laissez-le s'étendre à 100 % de largeur — le viewBox garde les courbes sans distorsion à toute taille. Un lissage faible avec des longueurs d'onde courtes donne un aspect dessiné à la main, tandis que le lissage complet avec des longueurs longues ressemble à une mer calme.
Outils associés
- Optimiseur SVG Optimisez et compressez vos fichiers SVG instantanément dans le navigateur. Supprimez les métadonnées, commentaires et données d'éditeur, réduisez la taille jusqu'à 60%.
- Convertisseur SVG en PNG Convertissez SVG en PNG, JPEG ou WebP instantanément dans votre navigateur. Échelle, taille et couleur de fond personnalisables. Gratuit, privé, sans téléchargement.
- Convertisseur PNG en SVG Convertisseur PNG en SVG gratuit en ligne. Transformez PNG, JPG et autres bitmaps en SVG vectoriel scalable avec contrôle des couleurs et des détails, entièrement dans votre navigateur.
- Générateur de Border Radius Générateur de border radius créatif gratuit en ligne. Déplacez 8 poignées ou choisissez un blob pour créer des formes CSS organiques et copier le code aussitôt.
- Convertisseur de Couleur Convertisseur de couleur en ligne gratuit. Convertissez les formats HEX, RGB, HSL, HSV instantanément avec sélecteur visuel. 100% privé, fonctionne dans votre navigateur.
- Générateur d'Easing CSS Générateur en ligne gratuit d'easing CSS. Déplacez les points de contrôle du cubic-bezier sur une courbe interactive, choisissez parmi 18 préréglages, regardez une animation de balle en boucle et copiez la fonction de temporisation instantanément.
- Générateur de Text Shadow CSS Générateur en ligne gratuit de text-shadow CSS. Empilez plusieurs couches d'ombre avec décalage, flou, couleur et opacité, essayez des préréglages Néon, 3D ou Rétro et copiez le CSS instantanément.
- Générateur de Clip Path CSS Générateur en ligne gratuit de clip-path CSS. Créez des formes polygon, circle, ellipse et inset avec des points déplaçables, aperçu en direct et copie du code CSS en un clic.