Line Chart Draw
Courbe SVG qui se trace de gauche à droite à son arrivée à l'écran, aire teintée en fondu et point lumineux qui s'allume sur chaque sommet au passage du trait.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Tout se règle sur la racine .fx-0226-root : data-values (les nombres, séparés par des virgules), et en option data-labels, data-title, data-unit, data-min et data-max. Le script construit dans .lcd-chart un SVG à la taille réelle du conteneur : une aire .lcd-area, une ligne .lcd-line et un point .lcd-dot par valeur. Les deux dégradés reçoivent un identifiant propre à chaque copie, ce qui évite qu'un graphique caché dans un onglet efface les couleurs d'un autre.
L'échelle verticale va de la plus petite à la plus grande valeur, élargie de 10 % de part et d'autre pour que la courbe ne colle pas aux bords ; data-min et data-max la fixent. Les points sont espacés régulièrement sur toute la largeur, avec une marge de 8 px. Un ResizeObserver recalcule le tracé quand la largeur change, sans relancer l'animation.
Quand au moins 35 % du graphique est visible, la classe lcd-on lance trois animations une seule fois : le trait passe de stroke-dashoffset égal à sa longueur à 0 en 2 s (ease-out), l'aire apparaît en 1 s à partir de 1 s, et chaque point s'allume en 0,5 s avec un retard proportionnel à sa position le long du trait. Les points s'allument donc dans l'ordre, juste après le passage de la ligne, y compris le dernier sommet.
Accessibilité
- Équivalent texte :
.lcd-chartporterole="img"et le script lui donne unaria-labelconstruit à partir des données, par exemple « Visites du site sur six mois. Janv. 1 200, Févr. 2 100… ». Le SVG lui-même est masqué aux lecteurs d'écran. - Nombres localisés : les valeurs de cette description sont écrites avec
Intl.NumberFormatdans la langue de la page, avec l'unité dedata-unit. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la courbe complète, l'aire et tous les points sont affichés d'emblée. - Pas d'interaction : aucun élément focalisable, rien au survol ni au toucher. Pour lire une valeur précise à l'écran, ajoutez vos propres étiquettes autour du graphique.
Compatibilité navigateur
SVG construit en JavaScript (IntersectionObserver, ResizeObserver, Intl.NumberFormat) et animations CSS sur stroke-dashoffset et opacity. Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies indépendantes, la seconde ne se trace qu'une fois affichée, mouvement réduit, 390 px de large, aucune erreur.
Sans ResizeObserver, la courbe est calculée au démarrage et à son apparition mais ne suit plus les changements de largeur. Sans JavaScript, la zone reste vide : prévoyez un texte de repli si le graphique porte une information indispensable.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0226-root" data-title="Visites du site sur six mois" data-labels="Janv.,Févr.,Mars,Avr.,Mai,Juin" data-values="1200,2100,1650,3400,2800,3900">
<div class="lcd-chart" role="img"></div>
</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 |
|---|---|---|
Valeurs (HTML — data-values sur la racine) |
1200,2100,1650,3400,2800,3900 | Au moins deux nombres séparés par des virgules, point décimal ; un point est dessiné pour chacun. |
Libellés et titre (HTML — data-labels, data-title) |
Six mois, « Visites du site sur six mois » | Servent uniquement à la description lue par les lecteurs d'écran ; rien n'est écrit à l'écran. |
Unité (HTML — data-unit) |
Aucune | Ajoutée après chaque nombre dans la description (% donne un pourcentage localisé). |
Échelle (HTML — data-min, data-max) |
Plus petite et plus grande valeur, ±10 % | Fixez-les pour aligner la courbe sur vos propres repères ou comparer deux graphiques. |
Couleurs (CSS — --lcd-from, --lcd-to, --lcd-area) |
#6366f1 → #d946ef, aire rgba(99, 102, 241, .3) | Dégradé horizontal du trait et teinte de l'aire (qui s'efface vers le bas). |
Points (CSS — --lcd-dot, --lcd-glow) |
#fff, halo rgba(99, 102, 241, .8) | Couleur des points et de leur lueur. |
Dimensions et fond (CSS — --lcd-height, --lcd-max-width, --lcd-min-height, --lcd-bg) |
180 px, 560 px, 300 px, #0a0a0f | Hauteur du graphique, largeur maximale, hauteur minimale de la racine, fond (transparent sur un site clair). |
FAQ
.lcd-chart. Les points sont répartis régulièrement avec 8 px de marge, ce qui permet d'aligner une rangée d'étiquettes en justify-content: space-between.
