Backgrounds✨ Premium
Ink Bloom
De l'encre qui s'épanouit dans l'eau : un dégradé radial simple, passé dans un feDisplacementMap piloté par une turbulence fractale, devient une tache aux bords déchiquetés qui grandit et respire. Six graines différentes garantissent que deux taches ne se ressemblent jamais.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
🎈
🎊
✨
Comment ça marche
Chaque tache part d'un dégradé radial à quatre paliers — cœur à 80 % d'opacité, anneau à 55 %, estompe à 18 %, puis transparent. Ces valeurs imitent la façon dont un pigment se concentre au centre d'une flaque d'aquarelle et s'éclaircit vers le bord. Le centre du dégradé est décalé au hasard, ce qui évite l'aspect de cible parfaitement circulaire.
Ce dégradé traverse un
feDisplacementMap dont la carte est une feTurbulence en fractalNoise, 3 octaves. Le déplacement (échelle 62) tord le contour du dégradé : les bords lisses deviennent des digitations, exactement comme le front d'un liquide qui pénètre un autre. Six filtres identiques mais de graines différentes tournent en parallèle, et chaque nouvelle tache en tire un au sort.
L'animation fait ensuite osciller la baseFrequency autour d'une valeur de base mémorisée pour chaque filtre — jamais en lisant puis réécrivant la valeur courante, ce qui ferait dériver la fréquence en marche aléatoire au fil des minutes. Les bords fractals respirent donc en place, sans jamais s'emballer.Accessibilité
- Le déclencheur est un vrai
<button>couvrant le panneau, avec unaria-labelexplicite : l'effet se pilote au clavier — Entrée ou Espace fait éclore une tache au centre — et pas seulement à la souris. - Sous
prefers-reduced-motion: reduce, les taches apparaissent en fondu simple, sans phase de croissance ni respiration des bords. L'effet garde son sens (une tache apparaît là où on clique) en supprimant l'animation. - Deux palettes sont fournies, l'une en fusion
multiplypour un fond papier clair, l'autre enscreenpour un fond sombre. Choisir la bonne évite les taches qui virent au gris sale par mauvaise composition. - Le pool est plafonné à 14 taches : au-delà, les plus anciennes sont retirées. Cela borne le nombre de filtres SVG actifs simultanément, ce qui protège autant les performances que la lisibilité du panneau.
Compatibilité navigateur
Filtres SVG feTurbulence et feDisplacementMap, dégradés radiaux CSS, modes de fusion mix-blend-mode, plus requestAnimationFrame et matchMedia. Aucune bibliothèque, aucun canvas.
Chrome 80+✓ Complet
Edge 80+✓ Complet
Firefox 75+✓ Complet
Safari 14+✓ Complet
Safari iOS 14+✓ Complet — limiter le pool à 8 taches sur mobile
Chrome Android 80+✓ Complet
Sans JavaScript, la composition de départ n'est pas posée et le panneau reste vide : prévoyez un fond (papier ou encre) sur .ink-scene. Si les filtres SVG ne sont pas gérés, les taches s'affichent comme de simples dégradés radiaux — moins organiques, mais parfaitement présentables.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
index.html — structure
<!-- Les 6 filtres de déformation vivent dans un <svg> de taille nulle,
posé n'importe où dans la page (voir le code complet). -->
<div class="ink-scene" id="inkScene">
<!-- Couche isolée : c'est elle qui reçoit les taches -->
<div class="ink-canvas" id="inkCanvas"></div>
<!-- Bouton plein panneau : clic = tache au curseur, Entrée/Espace = tache au centre.
Un bouton, pas un div : l'effet reste déclenchable au clavier. -->
<button class="ink-trigger" id="inkTrigger"
aria-label="Faire éclore une tache d'encre — clic pour placer, Entrée pour centrer">
</button>
</div>
🔒 Débloquer le code complet — à partir de 2,99 € le 1er mois
HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Échelle du feDisplacementMap |
62 | Le réglage principal. À 20 les bords ondulent à peine, à 62 ils forment de vraies digitations, au-delà de 100 la tache se disloque en filaments séparés. |
baseFrequency de la turbulence |
0.066 | Finesse du découpage du contour. Une fréquence basse donne quelques grands lobes ; une fréquence haute, une dentelle serrée qui évoque plutôt le buvard que l'eau. |
numOctaves |
3 | Richesse du détail fractal. 1 donne un contour lisse et ondulant, 4 ou 5 des bords très irréguliers — au prix d'un filtre nettement plus coûteux. |
| Paliers du dégradé | 80 % / 55 % / 18 % / transparent | Profil de densité du pigment. Rapprocher les paliers donne une tache franche à bord net ; les écarter, un lavis diffus qui s'éteint progressivement. |
| Taille des taches | 28 à 58 % de la largeur | Fourchette tirée au sort à chaque éclosion. Resserrer l'intervalle donne une composition régulière ; l'élargir, un mélange de grandes flaques et de petites gouttes. |
| Plafond du pool | 14 taches | Nombre de taches simultanées avant retrait des plus anciennes. C'est aussi le garde-fou de performance : chaque tache active un filtre SVG. |
| Palette et mode de fusion | paper (multiply) / dark (screen) | multiply pour de l'encre sombre sur fond clair, screen pour de l'encre lumineuse sur fond sombre. Se tromper de couple donne des taches ternes. |
FAQ
Parce qu'un
feTurbulence avec la même graine produit toujours exactement le même bruit. Avec un filtre unique, toutes les taches auraient rigoureusement le même contour, à l'échelle près — et l'œil repère cette répétition immédiatement. Six graines distinctes suffisent à casser cette impression : à moins de comparer deux taches côte à côte, on ne remarque jamais qu'elles proviennent d'un catalogue fini.C'est une erreur classique, et elle a été rencontrée ici. Lire la
baseFrequency courante puis lui ajouter une petite variation à chaque image transforme l'oscillation en marche aléatoire : au bout de quelques minutes, la fréquence a dérivé loin de sa valeur d'origine et la tache ne ressemble plus à rien. Le code mémorise donc la base de chaque filtre et calcule toujours base + oscillation, jamais courant + delta.Chaque tache maintient un filtre SVG actif, recalculé à chaque image tant que les bords respirent. Sur ordinateur, 14 est confortable et 25 reste tenable. Sur mobile, descendez à 8 : c'est le point où le coût par image redevient négligeable. Si vous avez besoin de plus de taches, arrêtez l'animation des plus anciennes — une tache figée ne coûte pratiquement rien.
