Festons
Gratuit, sans inscription, fonctionne dans votre navigateur.
Neuf arcs de cercle sur la largeur — le bord festonné classique des stores, des tickets et des grilles tarifaires. Les arcs portent la forme, donc ce style ignore entièrement le curseur d'irrégularité.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 9 |
| Amplitude | 48% |
| Irrégularité | 0% |
| Ligne de base | 55% |
| Couches | 1 |
| Douceur | 100% |
| Graine | 300 |
Ce qu'il faut savoir
- De vrais arcs plutôt que des courbes approchées : toutes les bosses sont identiques.
- L'amplitude règle la profondeur des festons, d'une ondulation discrète à des demi-cercles.
- À 382 octets, c'est plus léger qu'une vague douce de détail comparable.
Ce que ça coûte en octets
Cette forme exacte pèse 382 octets en SVG et 543 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 | 382 B |
| Arrière-plan CSS | 543 B |
| clip-path CSS | 574 B |
Le début du SVG de Festons
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 176A80 52.53 0 0 1 0 176A80 52.53 0 0 1 160 176A80 52.53 0 0 1 320 176A80 52.53 0 0 1 480 176A80 52.53 0 0 1 640 176A80 52.53 0 0 1 800 176A80 52.53 0 0 1 960 176A80 52.53 0 0 1 1120 176A80 52.53 0 0 1 1280 176A80 5…Plus en détail
Le curseur d'irrégularité est masqué pour ce style plutôt que laissé inerte. Les festons se définissent par leur régularité — laisser le bruit déplacer les extrémités des arcs donnerait des bosses à des hauteurs inégales, ce qui se lit comme un défaut de rendu et non comme une texture. Le générateur garde donc les points sur la ligne de base et laisse les arcs faire le travail.
Questions
Comment modifier Festons une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Festons 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 300 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.