Éclaboussure
Gratuit, sans inscription, fonctionne dans votre navigateur.
Quatorze points et l'irrégularité au maximum, soit le plus irrégulier que le générateur atteigne. Délibérément au bord de la plage utilisable : au-delà, la forme cesse de se lire comme un seul objet.
Les réglages qui la produisent
| Générateur | Blob |
|---|---|
| Points | 14 |
| Irrégularité | 100% |
| Douceur | 120% |
| Graine | 31337 |
Ce qu'il faut savoir
- Irrégularité maximale, plafonnée pour que la courbe ne puisse toujours pas se replier sur elle-même.
- À utiliser de préférence en grand et derrière quelque chose, là où l'irrégularité devient une texture.
- La forme la plus lourde du catalogue, à 641 octets.
Ce que ça coûte en octets
Cette forme exacte pèse 641 octets en SVG et 802 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 | 641 B |
| Arrière-plan CSS | 802 B |
| clip-path CSS | 859 B |
| border-radius CSS | 102 B |
Le début du SVG de Éclaboussure
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 28.35C110.32 32.66,110.26 51.14,120.6 57.22C130.94 63.3,140.83 53.62,151.72 58.75C162.61 63.88,172.54 71.69,175.04 82.87C177.55 94.05,173.43 106.6,164.24 114.66C155.05 122.73,137.85 117.64,129.09 123.2C120.33 128.76,126.28 132.16,120.46 142.48C…Plus en détail
Le plafond d'irrégularité existe parce qu'une spline ne reste pas à l'intérieur de ses points de contrôle — elle s'arque vers l'extérieur entre eux, et avec assez d'irrégularité un lobe peut aller assez loin pour croiser un segment voisin et transformer le blob en nœud papillon. La limite est établie à partir d'un balayage de tous les nombres de points, graines et douceurs que l'outil autorise, et non d'un nombre qui semblait à peu près juste.
Questions
Comment modifier Éclaboussure une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Éclaboussure 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 31337 avec 14 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.