Cristal
Gratuit, sans inscription, fonctionne dans votre navigateur.
Cinq points à forte irrégularité, reliés par des droites. La forte variation de rayon donne des arêtes longues et courtes dans la même forme, et c'est ce qui la fait lire comme un éclat plutôt que comme un pentagone régulier.
Les réglages qui la produisent
| Générateur | Blob |
|---|---|
| Points | 5 |
| Irrégularité | 85% |
| Douceur | 100% |
| Graine | 1357 |
Ce qu'il faut savoir
- La forte irrégularité est ce qui empêche ceci de ressembler à un pentagone ordinaire.
- Cinq côtés se lisent comme voulus ; six commence à se lire comme un hexagone raté.
- Reproductible à partir de la graine 1357.
Ce que ça coûte en octets
Cette forme exacte pèse 156 octets en SVG et 317 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 | 156 B |
| Arrière-plan CSS | 317 B |
| clip-path CSS | 374 B |
| border-radius CSS | 108 B |
Le début du SVG de Cristal
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 20.18L157.74 81.24L142.5 158.5L72.34 138.08L23.94 75.29Z" fill="#4f46e5"/></svg>Plus en détail
Même à l'irrégularité maximale, un polygone d'ici ne peut pas se croiser. Les points se placent à des angles régulièrement espacés avec des rayons positifs, donc la forme reste étoilée par rapport à son centre quoi que fasse la graine — une garantie que les styles courbes doivent maintenir par un plafond explicite, et que le polygone obtient gratuitement.
Questions
Comment modifier Cristal une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Cristal 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 1357 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.