Zigzag net
Gratuit, sans inscription, fonctionne dans votre navigateur.
Neuf points reliés par des droites plutôt que par une courbe. Ici les angles sont la forme, et les adoucir même un peu transforme un zigzag en mauvaise vague — c'est pourquoi il s'agit d'un style de jonction distinct et non du curseur de douceur baissé.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 9 |
| Amplitude | 58% |
| Irrégularité | 6% |
| Ligne de base | 55% |
| Couches | 1 |
| Douceur | 100% |
| Graine | 2024 |
Ce qu'il faut savoir
- Des segments droits : le fichier pèse une fraction d'une courbe passant par les mêmes points.
- Gardez l'irrégularité basse : un zigzag ne se lit comme voulu que tant que les dents se correspondent.
- À 264 octets, c'est l'une des formes les plus légères du catalogue.
Ce que ça coûte en octets
Cette forme exacte pèse 264 octets en SVG et 425 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 | 264 B |
| Arrière-plan CSS | 425 B |
| clip-path CSS | 456 B |
Le début du SVG de Zigzag net
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 140.02L0 177.61L160 215.5L320 236.17L480 227.82L640 197.67L800 154.53L960 121.73L1120 116.94L1280 139.19L1440 177.19L1440 320L-160 320Z" fill="#4f46e5"/></svg>Plus en détail
C'est de loin le séparateur le moins coûteux d'ici, parce qu'un segment de droite coûte une paire de coordonnées là où une cubique en coûte trois. Si vous ajoutez un séparateur à une page déjà lourde, un zigzag à neuf points coûte moins qu'une vague douce à quatre, et c'est sans doute la forme la plus frappante.
Questions
Comment modifier Zigzag net une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Zigzag net 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 2024 avec 9 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.