Vague de pied de page
Gratuit, sans inscription, fonctionne dans votre navigateur.
La même géométrie qu'un séparateur de héros, retournée verticalement pour que le remplissage se trouve au-dessus de la courbe plutôt qu'en dessous. Cette seule différence sépare une forme qui se place au-dessus d'un pied de page d'une forme qui se place sous un en-tête.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 4 |
| Amplitude | 55% |
| Irrégularité | 20% |
| Ligne de base | 48% |
| Couches | 2 |
| Douceur | 100% |
| Graine | 640 |
Ce qu'il faut savoir
- Retournée verticalement : la zone pleine se referme contre le haut du canevas.
- Deux couches donnent un peu de profondeur sans le poids de trois.
- Posez-la juste au-dessus de votre pied de page, dans la couleur de fond de ce pied de page.
Ce que ça coûte en octets
Cette forme exacte pèse 551 octets en SVG et 718 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 | 551 B |
| Arrière-plan CSS | 718 B |
| clip-path CSS | 510 B |
Le début du SVG de Vague de pied de page
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 207.13C-300 198.98,-120 174.18,0 158.27C120 142.36,240 112.09,360 111.66C480 111.23,600 137.74,720 155.71C840 173.68,960 218.07,1080 219.5C1200 220.93,1380 173.48,1440 164.28L1440 0L-360 0Z" fill="#a5b4fc" opacity="…Plus en détail
Le miroir vertical n'est pas ici une transformation CSS, il fait partie du tracé : la courbe est reflétée et la queue se referme contre le bord opposé. Le SVG exporté tient donc tout seul, sans conteneur ni `transform` à retenir — ce qui importe surtout pour l'export en arrière-plan CSS, où il n'y a de toute façon aucun élément à transformer.
Questions
Comment modifier Vague de pied de page une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Vague de pied de page 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 640 avec 4 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.