Triangle arrondi
Gratuit, sans inscription, fonctionne dans votre navigateur.
Trois points, c'est le minimum qu'accepte une spline fermée, et cela donne un triangle arrondi plutôt que quelque chose de vraiment blobesque. Utile comme accent géométrique doux là où un cercle serait trop neutre.
Les réglages qui la produisent
| Générateur | Blob |
|---|---|
| Points | 3 |
| Irrégularité | 35% |
| Douceur | 100% |
| Graine | 512 |
Ce qu'il faut savoir
- Trois points, donc trois lobes — la forme fermée la plus simple que produise le générateur.
- Le blob le plus léger du catalogue, à 217 octets.
- Montez l'irrégularité pour un rendu scalène, baissez-la pour quelque chose de presque équilatéral.
Ce que ça coûte en octets
Cette forme exacte pèse 217 octets en SVG et 378 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 | 217 B |
| Arrière-plan CSS | 378 B |
| clip-path CSS | 435 B |
| border-radius CSS | 108 B |
Le début du SVG de Triangle arrondi
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 31.4C117.75 31.39,162.06 114.14,153.18 130.7C144.3 147.27,55.56 147.32,46.7 130.77C37.84 114.22,82.25 31.41,100 31.4Z" fill="#4f46e5"/></svg>Plus en détail
Trois points est aussi le cas le plus difficile pour les mathématiques, et c'est pourquoi il figure au catalogue plutôt que caché au bout d'un curseur. Avec seulement trois, chaque point est à la fois les deux voisins des autres et l'indexation circulaire n'a nulle part où se cacher : une implémentation de spline fermée qui se trompe sur la couture échoue ici de la façon la plus visible, c'est donc la forme que la suite de tests vérifie en premier.
Questions
Comment modifier Triangle arrondi une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Triangle arrondi 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 512 avec 3 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.