Ondulation
Gratuit, sans inscription, fonctionne dans votre navigateur.
Onze points à faible amplitude : un bord fin et régulier plutôt qu'une déclaration. Utile quand un séparateur doit exister sans attirer l'attention, et le seul préréglage qui se lit bien en bandeau étroit.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 11 |
| Amplitude | 30% |
| Irrégularité | 8% |
| Ligne de base | 55% |
| Couches | 1 |
| Douceur | 95% |
| Graine | 77 |
Ce qu'il faut savoir
- La faible amplitude évite que la section du dessous perde de la hauteur.
- Beaucoup de points signifie beaucoup de segments cubiques : c'est la vague la plus lourde du catalogue, à 655 octets.
- Presque aucune irrégularité, donc la répétition est assez régulière pour passer pour un motif sur un écran large.
Ce que ça coûte en octets
Cette forme exacte pèse 655 octets en SVG et 816 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 | 655 B |
| Arrière-plan CSS | 816 B |
| clip-path CSS | 847 B |
Le début du SVG de Ondulation
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-130.91 159.28C-110.18 161.55,-41.45 168.2,0 173.6C41.45 178.99,89.45 188.64,130.91 193.36C172.36 198.08,220.36 201.74,261.82 203.4C303.27 205.07,351.27 204.33,392.73 203.88C434.18 203.43,482.18 203.29,523.64 200.54C565.…Plus en détail
C'est le préréglage où le compteur d'octets justifie sa place. Chaque point supplémentaire est un segment cubique complet de plus — trois paires de coordonnées — si bien qu'une ondulation coûte plusieurs fois une vague douce pour une différence que la plupart des visiteurs ne remarqueront jamais consciemment. Si vous aimez le rendu mais pas le poids, essayez six points avec la douceur augmentée.
Questions
Comment modifier Ondulation une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Ondulation 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 77 avec 11 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.