Vague douce
Gratuit, sans inscription, fonctionne dans votre navigateur.
Le préréglage par défaut, et pour une raison : quatre points, une amplitude modérée et presque aucune irrégularité donnent une courbe qui se lit comme délibérée plutôt que décorative. C'est la forme que la plupart des gens ont en tête quand ils disent vouloir une vague sous leur section d'en-tête.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 4 |
| Amplitude | 38% |
| Irrégularité | 12% |
| Ligne de base | 55% |
| Couches | 1 |
| Douceur | 100% |
| Graine | 1204 |
Ce qu'il faut savoir
- La faible irrégularité la garde symétrique : elle ne dispute pas l'attention à ce qui la surplombe.
- Quatre points, c'est le minimum qui donne encore une montée et une descente — moins devient un simple balayage, plus devient une ondulation.
- À 322 octets, elle est assez légère pour être intégrée en ligne plutôt que récupérée comme fichier.
Ce que ça coûte en octets
Cette forme exacte pèse 322 octets en SVG et 483 octets en arrière-plan CSS — l'URI de données est plus lourde parce que l'encodage en pourcentage coûte trois caractères pour chacun qu'il échappe. Les deux chiffres concernent la forme montrée ci-dessus, avec deux décimales de précision sur les coordonnées.
| Format | Taille |
|---|---|
| SVG | 322 B |
| Arrière-plan CSS | 483 B |
| clip-path CSS | 514 B |
Le début du SVG de Vague douce
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></sv…Plus en détail
Si vous ne devez changer qu'une chose, changez la ligne de base plutôt que l'amplitude. Ici l'amplitude est une part de l'espace entre la ligne de base et le bord le plus proche : l'augmenter sur une vague centrée la rend plus profonde, tandis que déplacer la ligne de base change la quantité de couleur pleine sous la courbe — ce qui est en général ce que les gens veulent vraiment quand un séparateur paraît trop mince.
Questions
Comment modifier Vague douce une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Vague douce dans la rangée de préréglages, puis faites glisser ce que vous voulez. Le préréglage est un point de départ, pas un verrou — tous les curseurs restent actifs, et le champ de graine accepte un mot si vous préférez nommer votre forme plutôt que la numéroter.
Sera-t-elle identique la prochaine fois ?
Oui, tant que la graine est la même. Celle-ci est la graine 1204 avec 4 points. Le générateur est déterministe : ces réglages reproduisent cette courbe exacte sur n'importe quel appareil.
Puis-je utiliser une autre couleur ?
Oui — la couleur est appliquée à l'export, elle n'est pas figée dans la géométrie. L'aperçu ci-dessus utilise la couleur par défaut ; choisissez la vôtre dans le générateur et le SVG, l'arrière-plan CSS et le clip-path suivront.
Chaque chiffre et chaque forme de cette page ont été produits en exécutant le générateur au moment de la compilation : ils décrivent donc l'outil que vous vous apprêtez à utiliser, et non une version qui a existé un jour.