Blob organique
Gratuit, sans inscription, fonctionne dans votre navigateur.
Huit points avec une irrégularité assez forte pour que les lobes diffèrent nettement en taille. C'est la forme que les gens entendent généralement par « blob » : assez irrégulière pour paraître voulue, assez régulière pour se lire encore comme un seul objet.
Les réglages qui la produisent
| Générateur | Blob |
|---|---|
| Points | 8 |
| Irrégularité | 72% |
| Douceur | 100% |
| Graine | 1618 |
Ce qu'il faut savoir
- La forte irrégularité donne à chaque lobe son caractère : la forme a un devant et un arrière.
- Fonctionne bien en clip-path sur une photographie, où l'irrégularité se lit comme un recadrage voulu.
- Reproductible à partir de la graine 1618.
Ce que ça coûte en octets
Cette forme exacte pèse 402 octets en SVG et 563 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 | 402 B |
| Arrière-plan CSS | 563 B |
| clip-path CSS | 620 B |
| border-radius CSS | 110 B |
Le début du SVG de Blob organique
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 54.85C116.91 53.97,145.16 39.06,153.41 46.59C161.66 54.11,150.46 83.17,149.49 100C148.51 116.83,155.8 138.58,147.55 147.55C139.3 156.52,117.11 152.56,100 153.82C82.89 155.08,56.37 164.08,44.89 155.11C33.41 146.14,29.94 117.2,31.11 100C32.28 82.…Plus en détail
Il existe une limite à l'irrégularité d'un blob, et elle n'est pas arbitraire. Les points se placent à des angles régulièrement espacés avec des rayons variables : le polygone qui les relie ne peut donc jamais se croiser — mais la courbe qui les traverse, si, dès qu'un lobe s'arque assez pour atteindre un segment voisin. L'irrégularité maximale est ici calée sur un balayage de tous les nombres de points et de toutes les graines, de sorte qu'aucun réglage ne produit une forme qui se replie sur elle-même.
Questions
Comment modifier Blob organique une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Blob organique 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 1618 avec 8 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.