Étincelle
Gratuit, sans inscription, fonctionne dans votre navigateur.
Quatre lobes aux rayons intérieurs profonds et à la douceur modérée — l'étincelle à quatre branches utilisée pour les reflets, les ornements d'IA et les badges « nouveau ». Assez petite pour tenir dans une ligne de texte.
Les réglages qui la produisent
| Générateur | Blob |
|---|---|
| Points | 4 |
| Irrégularité | 18% |
| Douceur | 55% |
| Graine | 702 |
Ce qu'il faut savoir
- Quatre lobes donnent le scintillement classique ; au-delà de six cela cesse de se lire comme une étincelle.
- Une douceur modérée garde les branches concaves plutôt que droites.
- À 408 octets, assez légère pour en aligner une douzaine.
Ce que ça coûte en octets
Cette forme exacte pèse 408 octets en SVG et 569 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 | 408 B |
| Arrière-plan CSS | 569 B |
| clip-path CSS | 626 B |
| border-radius CSS | 110 B |
Le début du SVG de Étincelle
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 38.45C104.27 38.46,117.56 71.11,123.25 76.75C128.94 82.39,162.23 95.85,162.11 100C161.99 104.15,127.67 115.89,121.98 121.98C116.29 128.07,104.25 166.24,100 166.45C95.75 166.67,81.57 130.44,75.65 124.35C69.73 118.26,35.33 104.37,35.43 100C35.53 …Plus en détail
Il vaut mieux la générer en petit et s'en servir plusieurs fois que l'utiliser une seule fois en grand. La forme ne porte aucun détail que l'échelle récompense, et comme accent en ligne à seize ou vingt pixels elle fait un travail qu'aucune autre forme de ce catalogue ne fait.
Questions
Comment modifier Étincelle une fois que je l'ai ?
Ouvrez le générateur, cliquez sur Étincelle 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 702 avec 4 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.