Galet
Gratuit, sans inscription, fonctionne dans votre navigateur.
Cinq points à irrégularité modérée, ce qui tend à produire quelque chose de plus proche d'un galet de rivière que d'une éclaboussure. Le blob le plus utile pour tout ce qui doit se lire comme un objet solide plutôt que comme une tache décorative.
Les réglages qui la produisent
| Générateur | Blob |
|---|---|
| Points | 5 |
| Irrégularité | 45% |
| Douceur | 105% |
| Graine | 404 |
Ce qu'il faut savoir
- Cinq points donnent une silhouette à nombre impair, ce qui évite la symétrie accidentelle de six.
- Irrégularité modérée : irrégulier, mais tous les lobes restent de taille comparable.
- La forme la plus proche de ce qu'un border-radius CSS peut imiter, si vous préférez ne pas livrer de SVG.
Ce que ça coûte en octets
Cette forme exacte pèse 294 octets en SVG et 455 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 | 294 B |
| Arrière-plan CSS | 455 B |
| clip-path CSS | 512 B |
| border-radius CSS | 104 B |
Le début du SVG de Galet
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 41.28C122.08 40.79,161.83 60.16,167.4 78.1C172.96 96.04,149.18 132.27,131.81 143.78C114.43 155.29,83.98 154.88,68.12 143.87C52.27 132.87,35.62 98.85,41.2 80.89C46.78 62.94,77.92 41.76,100 41.28Z" fill="#4f46e5"/></svg>Plus en détail
Un galet est le blob qu'il vaut le plus la peine de comparer d'un format d'export à l'autre. En SVG il est exact ; en border-radius c'est une approximation à quatre coins, qui ne peut pas reproduire cinq lobes et ne devrait pas prétendre le contraire. La sortie border-radius est proposée comme une forme à part entière et non comme la même forme dans un autre format, car la présenter autrement serait un mensonge qu'on ne découvre qu'après la mise en ligne.
Questions
Comment modifier Galet une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Galet 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 404 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.