Vagues superposées
Gratuit, sans inscription, fonctionne dans votre navigateur.
Trois courbes tirées de la même graine à des phases différentes, chacune un peu plus bas et un peu moins opaque. Partager la graine est tout l'enjeu : des couches issues de graines sans rapport ressemblent à trois vagues qui se chevauchent par hasard, alors que des déphasages d'une même vague ressemblent à de la profondeur.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 5 |
| Amplitude | 62% |
| Irrégularité | 22% |
| Ligne de base | 42% |
| Couches | 3 |
| Douceur | 100% |
| Graine | 3311 |
Ce qu'il faut savoir
- L'opacité augmente vers l'avant, donc la pile se lit comme une distance et non comme trois feuilles plates.
- Chaque couche est un tracé distinct : vous pouvez les recolorer séparément après collage.
- Trois tracés coûtent 898 octets à eux tous — toujours moins qu'un petit PNG de la même chose.
Ce que ça coûte en octets
Cette forme exacte pèse 898 octets en SVG et 1 071 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 | 898 B |
| Arrière-plan CSS | 1 071 B |
| clip-path CSS | 544 B |
Le début du SVG de Vagues superposées
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-…Plus en détail
Les couches sont le moyen le moins cher de faire paraître conçu un séparateur plat, et le plus souvent poussé trop loin. Deux suffisent en général ; à cinq, les couches arrière sont si délavées qu'elles ajoutent des octets sans ajouter de profondeur. Si vous voulez plus de séparation, écartez les lignes de base plutôt que d'ajouter une couche de plus.
Questions
Comment modifier Vagues superposées une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Vagues superposées 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 3311 avec 5 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.