Marches
Gratuit, sans inscription, fonctionne dans votre navigateur.
Chaque intervalle court horizontalement jusqu'au milieu, tourne à la verticale, puis continue — un profil d'escalier. Le virage se fait au milieu et non sur le point lui-même, et c'est ce qui garde les marches régulières.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 5 |
| Amplitude | 60% |
| Irrégularité | 18% |
| Ligne de base | 52% |
| Couches | 1 |
| Douceur | 100% |
| Graine | 1111 |
Ce qu'il faut savoir
- Uniquement des angles droits : il s'accorde bien avec une mise en page sur grille.
- Moins de points donne des marches plus larges et plus affirmées ; davantage approche d'une ligne dentelée.
- À 358 octets, il coûte à peu près autant qu'une vague douce par les mêmes points.
Ce que ça coûte en octets
Cette forme exacte pèse 358 octets en SVG et 519 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 | 358 B |
| Arrière-plan CSS | 519 B |
| clip-path CSS | 550 B |
Le début du SVG de Marches
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 118.84L-144 118.84L-144 177.26L0 177.26L144 177.26L144 214.27L288 214.27L432 214.27L432 202.99L576 202.99L720 202.99L720 140.25L864 140.25L1008 140.25L1008 117.08L1152 117.08L1296 117.08L1296 171.17L1440 171.17L1440…Plus en détail
Marquer la marche au milieu est le détail qui fait fonctionner tout ceci. Tourner sur le point lui-même rendrait une marche sur deux deux fois plus large que sa voisine, ce qui se lit comme un défaut de rendu et non comme un parti pris — et c'est la version que donne l'implémentation évidente.
Questions
Comment modifier Marches une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Marches 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 1111 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.