SVG Fill Animation
Une bouteille SVG dont le liquide en dégradé monte jusqu'à un niveau réglable puis redescend, en boucle — ou monte une seule fois et reste à son niveau.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le dessin tient dans un SVG de 100×120 unités : le contour de la bouteille (.flb-outline, trait de 3), et un rectangle de liquide (.flb-liquid) rempli d'un dégradé vertical indigo vers magenta, découpé à la forme de la bouteille par un clipPath qui reprend le même tracé. Le liquide est dessiné après le contour et en recouvre donc la moitié intérieure.
L'animation flbFill déplace le rectangle verticalement : il part 105 unités plus bas (bouteille vide) et remonte jusqu'au niveau fixé par --flb-level (1 = pleine, 0,5 = à moitié). Elle dure --flb-speed (1,25 s, courbe ease-in-out) et tourne en aller-retour : la bouteille se remplit puis se vide, soit 2,5 s par cycle. Avec --flb-repeat: 1, elle se remplit une fois et reste au niveau choisi. Le dégradé est attaché au liquide : à mi-hauteur, on voit surtout sa partie haute.
Le dégradé et la découpe ont besoin d'un id : avec des id fixes, une deuxième bouteille dans la page reprendrait ceux de la première et perdrait son remplissage dès que la première serait masquée (onglet, accordéon). Le court script donne donc des id uniques à chaque copie présente au chargement. --flb-play: paused fige le liquide là où il en est.
Accessibilité
- Décoratif : le SVG porte
aria-hidden="true". S'il sert de jauge, écrivez la valeur en texte à côté (« 62 % ») : la bouteille seule ne dit rien à un lecteur d'écran. - Mouvement réduit : avec
prefers-reduced-motion: reduce, l'animation est retirée et le liquide s'affiche directement à son niveau (pleine par défaut) — mesuré dans les trois moteurs, 0 animation en cours. - Aucune interaction : rien à cliquer ni à atteindre au clavier ; l'effet est le même à la souris, au doigt et au clavier.
- Rythme : un remplissage par 1,25 s, sans flash ; pour un indicateur d'attente qui dure, un
--flb-speedplus long reste plus calme.
Compatibilité navigateur
SVG, CSS et 0,9 Ko de JavaScript. Le mouvement réduit demande Chrome 74, Firefox 63 et Safari 10.1. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 0 erreur, rien d'ajouté sur window, deux copies avec chacune ses id, et la 2e garde son remplissage quand la 1re est masquée (2 % de pixels colorés dans les deux cas).
Sans JavaScript, une seule bouteille par page fonctionne normalement ; à partir de deux, elles partagent les mêmes id. Sans animations CSS, la bouteille s'affiche remplie à son niveau.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0602-root">
<svg class="flb-svg" viewBox="0 0 100 120" aria-hidden="true">
<defs>
<linearGradient id="flb-grad" …>
<stop class="flb-stop-1" …/>
<stop class="flb-stop-2" …/>
</linearGradient>
<clipPath id="flb-clip"><path d="…"/></clipPath>
</defs>
<path class="flb-outline" d="…"/>
<g class="flb-inside" clip-path="url(#flb-clip)">
<rect class="flb-liquid" … fill="url(#flb-grad)"/>
</g>
</svg>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--flb-level |
1 |
Niveau atteint, de 0 (vide) à 1 (pleine) : .62 pour 62 %. |
--flb-repeat |
infinite |
1 : la bouteille se remplit une fois et reste à son niveau ; nombre pair : elle finit vide. |
--flb-speed |
1.25s |
Durée d'un remplissage (un cycle remplir-vider dure le double). |
--flb-play |
running |
paused fige le liquide à sa hauteur du moment. |
--flb-color-1 et --flb-color-2 |
#6366f1 et #d946ef |
Couleurs du bas et du haut du liquide. |
--flb-line et --flb-size |
#6366f1 et 100px |
Couleur du contour et largeur du dessin (la hauteur suit, 1,2 fois la largeur). |
--flb-bg et --flb-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale du cadre ; transparent et 0 dans un bouton ou une carte. |
FAQ
d du contour .flb-outline et celui du chemin du clipPath par le même tracé. Gardez la forme entre les hauteurs 10 et 115 du viewBox, sinon les niveaux ne tombent plus juste.data-flb-ready). Relancez-le après avoir inséré les nouvelles : il ignore celles déjà traitées.--flb-color-1 et --flb-color-2.
