Vague organique
Gratuit, sans inscription, fonctionne dans votre navigateur.
Sept points avec l'irrégularité presque au maximum : la courbe vagabonde au lieu de se répéter. Elle se lit comme dessinée plutôt que calculée, ce qu'une sinusoïde régulière ne peut justement pas faire.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 7 |
| Amplitude | 70% |
| Irrégularité | 85% |
| Ligne de base | 50% |
| Couches | 1 |
| Douceur | 100% |
| Graine | 9142 |
Ce qu'il faut savoir
- Une forte irrégularité veut dire que la graine compte — changez-la et vous obtenez une courbe réellement différente, pas une courbe décalée.
- Toujours parfaitement lisse : l'irrégularité déplace les points, elle n'affecte pas la façon dont la courbe les traverse.
- Mélangez jusqu'à ce que quelque chose convienne, puis notez la graine 9142 pour la conserver.
Ce que ça coûte en octets
Cette forme exacte pèse 478 octets en SVG et 639 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 | 478 B |
| Arrière-plan CSS | 639 B |
| clip-path CSS | 670 B |
Le début du SVG de Vague organique
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-205.71 191.31C-171.43 178.3,-68.57 110.51,0 113.21C68.57 115.91,137.14 202.67,205.71 207.53C274.29 212.39,342.86 145,411.43 142.35C480 139.71,548.57 197.9,617.14 191.66C685.71 185.41,754.29 115.82,822.86 104.89C891.43 9…Plus en détail
Le curseur d'irrégularité mélange une sinusoïde et un bruit à graine plutôt que de basculer de l'un à l'autre, et cela compte plus qu'il n'y paraît. La sinusoïde pure a l'air d'une démo CSS et le bruit pur a l'air d'une erreur ; tout ce que les gens publient réellement se situe quelque part entre les deux, et un seul curseur le long de cette ligne est plus utile que deux modes qui produisent chacun une mauvaise réponse.
Questions
Comment modifier Vague organique une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Vague organique 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 9142 avec 7 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.