Générateur de vagues SVG
Ajustez la taille, la forme et la couleur des vagues pour créer des séparateurs ou des arrière-plans de page web. Copiez ou enregistrez le SVG ou le CSS d’arrière-plan, ou enregistrez une image PNG.
Ce que vous pouvez faire
Ajuster la forme et les couleurs
Ajuster la hauteur, le nombre et la position des vagues ainsi que le sens du remplissage, puis les créer avec une ou deux couleurs.
Obtenir le résultat dans un format adapté à vos besoins
Copier ou enregistrer le code SVG ou un arrière-plan CSS, ou l’enregistrer sous forme d’image PNG.
Mode d’emploi
Choisir une forme de départ
Ajustez directement les valeurs ou choisissez une forme similaire dans « Choisir un modèle ».
Ajuster la taille et les couleurs
Indiquez la largeur, la hauteur, l’amplitude et le nombre de vagues. Ajustez la position de départ et la hauteur centrale dans les paramètres avancés.
Générer et vérifier le SVG
Vérifiez la forme de la vague générée et les zones transparentes. Régénérez-la après avoir modifié les paramètres.
Obtenir le format souhaité
Choisissez un SVG ou un arrière-plan CSS à copier ou à enregistrer, ou enregistrez le PNG.
Utile pour
Séparer les sections d’une page
Créer des séparateurs en forme de vague entre des sections de contenu ou au-dessus d’un pied de page.
Harmoniser les couleurs de votre site
Utiliser une couleur unie ou un dégradé pour créer un élément d’arrière-plan assorti à la palette de couleurs de la page.
Formes des vagues et formats d’enregistrement
Amplitude et nombre de vagues
L’amplitude correspond à la variation verticale et le nombre de vagues au nombre de cycles sur toute la largeur. Cette fonctionnalité ne sert pas à afficher des formes d’onde audio.
Position des vagues et zones rognées
Modifiez la position de départ avec la phase et la position verticale avec la hauteur centrale. Les parties situées hors de l’image sont rognées.
Choisir entre SVG et PNG
Le SVG représente la forme sous forme de vecteurs. Le PNG enregistre une image aux dimensions en pixels indiquées et préserve les zones transparentes.
Positionner un arrière-plan CSS
Le CSS définit une image d’arrière-plan. Définissez la largeur et la hauteur de l’élément où vous l’utilisez afin de fournir une zone d’affichage à l’arrière-plan.
Foire aux questions
Puis-je ajuster la forme et les couleurs de la vague ?
Vous pouvez définir des valeurs et des couleurs. Sélectionnez « Utiliser deux couleurs » pour définir la deuxième couleur et l’angle du dégradé.
Que deviennent les paramètres actuels lorsque je sélectionne un modèle ?
Les paramètres du modèle remplacent les paramètres actuels, notamment la largeur, la hauteur et les couleurs. Après l’avoir sélectionné, modifiez les valeurs nécessaires.
L’aperçu change-t-il lorsque je modifie les paramètres ?
Après avoir apporté des modifications, sélectionnez « Générer le SVG » pour vérifier le résultat. L’ancien résultat généré n’est alors plus disponible pour l’affichage ou l’enregistrement.
Le SVG représente-t-il une onde sinusoïdale exacte ?
La vague est approximée par une courbe cubique lisse. Il ne s’agit pas d’une forme d’onde destinée à la mesure mathématique ou à l’analyse audio.
Gestion des fichiers
- Saisie
- Créer à partir de paramètres numériques de vagues et de couleurs. Aucune image n’a besoin d’être sélectionnée.
- Résultats
- wave.svg, wave.css et wave.png. Le SVG et le CSS peuvent également être copiés.