Organic Blob
Fond organique animé par morphing CSS border-radius et grain SVG feTurbulence — un blob vivant sans une ligne de JavaScript.
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
La forme est un simple <div> habillé d'un dégradé linéaire (135°, violet → rose par défaut) et piloté par l'animation CSS ngBlobMorph (8 s, ease-in-out, infinie). Celle-ci fait tourner quatre configurations de border-radius à huit valeurs indépendantes — technique dite CSS blob morphing. Chaque transition produit une contraction/dilatation asymétrique qui donne l'illusion d'un organisme souple en mouvement, sans aucun calcul JavaScript.
Une texture de grain est superposée via le pseudo-élément ::after : un SVG encodé en Data URI applique un filtre <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3"> sur un rectangle plein, rendu par mix-blend-mode: overlay à opacity: 0.15. Le grain paraît intégré à la surface du blob sans masquer le dégradé sous-jacent.
La CSS référence en plus un filtre SVG externe via filter: url(#ng-blob-filter). Ce filtre — à déclarer une fois dans la page dans une balise <svg> invisible — enchaîne un <feTurbulence> dont baseFrequency est animée par <animate> et un <feDisplacementMap scale="22"> qui ondule les contours du blob en temps réel. C'est le second niveau de déformation, au-delà du morphing CSS.
L'effet est intégralement piloté par le moteur CSS et le pipeline SVG du navigateur : zéro JavaScript, zéro dépendance, zéro boucle requestAnimationFrame. Les performances restent constantes quelle que soit la charge JS de la page hôte.
Accessibilité
- prefers-reduced-motion non géré : l'animation
ngBlobMorph(8 s en boucle) tourne quel que soit le paramètre système. Pour un usage accessible, enveloppez la règleanimationdans@media (prefers-reduced-motion: no-preference) { .ng-blob { animation: … } }. - L'effet est purement décoratif — posez
aria-hidden="true"sur.ng-blob-sceneet sur le filtre SVG pour que les lecteurs d'écran les ignorent. - Aucune interaction clavier : le blob ne reçoit jamais le focus et ne répond à aucun événement. La navigation au clavier de la page hôte n'est pas perturbée.
- Texte superposé : le dégradé multicolore peut créer des zones de faible contraste. Prévoir un scrim semi-opaque (
rgba(0,0,0,.45)) entre le blob et le texte pour garantir WCAG AA (ratio ≥ 4,5:1). - L'effet est 100 % CSS/SVG : aucun script n'est exécuté — les utilisateurs qui bloquent JavaScript voient le blob fonctionner normalement.
Compatibilité navigateur
Nécessite CSS border-radius multi-valeurs, animations CSS3, SVG inline et feDisplacementMap — disponibles dans tous les navigateurs modernes depuis 2020.
Si <code>feDisplacementMap</code> n'est pas supporté (extrêmement rare), le blob s'affiche avec le morphing CSS et le grain uniquement — forme toujours animée, sans ondulation des contours. Aucune erreur, aucune dépendance cassée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<!-- Filtre SVG — à placer une fois dans la page (hors flux) -->
<svg aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
<defs>
<filter id="ng-blob-filter" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.012 0.008" numOctaves="3" result="noise">
<animate attributeName="baseFrequency"
values="0.012 0.008;0.016 0.012;0.012 0.008"
dur="8s" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="22"
xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
</svg>
<!-- Blob -->
<div class="ng-blob-scene" aria-hidden="true">
<div class="ng-blob"></div>
</div>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 |
|---|---|---|
| background (propriété CSS sur .ng-blob) | linear-gradient(135deg, #8b5cf6, #ec4899) | Couleurs du blob — remplacez les deux hex par votre palette brand. Accepte tout format CSS : radial-gradient, couleur unie, etc. |
| width / height (.ng-blob) | 160px × 160px | Dimensions du blob. Montez à 300–400 px pour un fond plein écran, descendez à 80–120 px pour un élément de composition. |
| animation-duration (shorthand animation dans .ng-blob) | 8s | Vitesse du morphing. 5 s = rapide et organique, 14 s = lent et hypnotique. |
| opacity (::after) | 0.15 | Intensité du grain de surface. 0.05 = quasi invisible, 0.35 = grain prononcé façon papier. |
| baseFrequency (SVG grain dans .ng-blob::after) | 0.7 | Densité du grain feTurbulence. Valeurs basses (0.3) = grain grossier, valeurs hautes (1.2) = grain fin type film photo. |
| scale (feDisplacementMap dans #ng-blob-filter) | 22 | Intensité de la déformation SVG des bords. 0 = bords lisses CSS seulement, 40 = contours très ondulés. |
| border-radius (keyframes ngBlobMorph — 4 étapes) | voir keyframes | Forme du morphing — modifiez les 4 ensembles de valeurs border-radius pour un mouvement plus arrondi, anguleux ou asymétrique. |
FAQ
#ng-blob-filter est à déclarer une seule fois dans votre page, dans un <svg aria-hidden="true" style="position:absolute;width:0;height:0">. Il contient un <feTurbulence> animé et un <feDisplacementMap> qui ondulent les contours du blob. Sans lui, filter: url(#ng-blob-filter) est simplement ignoré et le blob s'anime avec le morphing CSS seul — aucune erreur, juste sans la déformation SVG des bords..ng-blob autant de fois que nécessaire. Ajoutez un animation-delay négatif (ex. -3s) sur chaque instance pour démarrer dans la boucle sans attendre, et variez animation-duration pour que les formes ne se synchronisent pas. Le filtre SVG #ng-blob-filter est partagé — une seule déclaration suffit pour toutes les instances.will-change: border-radius, filter sur .ng-blob pour que le navigateur alloue un calque composite dédié — le morphing CSS et le filtre SVG tournent alors sur le GPU sans repeindre le reste de la page. Sur mobile, réduisez scale du feDisplacementMap à 12–15 et la baseFrequency du grain à 0.5 pour préserver la batterie.
