Bord de nuage
Gratuit, sans inscription, fonctionne dans votre navigateur.
Les mêmes arcs qu'un feston, mais bien moins nombreux et bien plus profonds, ce qui cesse de se lire comme un bord décoratif et commence à se lire comme un objet — précisément, comme un nuage. Bon au-dessus d'un pied de page ou sous un héros quand on veut quelque chose d'avenant plutôt que de neutre.
Les réglages qui la produisent
| Générateur | Vague |
|---|---|
| Points | 5 |
| Amplitude | 82% |
| Irrégularité | 0% |
| Ligne de base | 50% |
| Couches | 1 |
| Douceur | 100% |
| Graine | 301 |
Ce qu'il faut savoir
- Peu d'arcs, mais grands : moins il y a de bosses, plus cela se lit comme une forme et moins comme une garniture.
- Associez-le à une couleur douce ; à cette échelle une couleur saturée domine la section.
- Seulement 295 octets pour une forme de cette taille.
Ce que ça coûte en octets
Cette forme exacte pèse 295 octets en SVG et 456 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 | 295 B |
| Arrière-plan CSS | 456 B |
| clip-path CSS | 487 B |
Le début du SVG de Bord de nuage
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-288 160A144 99.71 0 0 1 0 160A144 99.71 0 0 1 288 160A144 99.71 0 0 1 576 160A144 99.71 0 0 1 864 160A144 99.71 0 0 1 1152 160A144 99.71 0 0 1 1440 160L1440 320L-288 320Z" fill="#4f46e5"/></svg>Plus en détail
Essayez celui-ci retourné verticalement avec les arches découpées vers l'intérieur. Les cinq mêmes arcs qui se lisent comme un nuage suspendu se lisent comme une rangée d'alcôves lorsqu'ils mordent vers le haut dans le remplissage — et c'est un séparateur réellement différent à partir des quatre mêmes réglages.
Questions
Comment modifier Bord de nuage une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Bord de nuage 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 301 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.