Pie Chart Reveal
Camembert SVG avec légende : quand il arrive à l'écran, chaque part part du haut du disque et glisse jusqu'à sa place en s'élargissant, l'une après l'autre.
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
La racine .fx-0227-root contient un emplacement vide .pcs-pie et une liste ul.pcs-legend. Chaque li de la liste est une part : son texte est le libellé, son attribut data-value la quantité. Le script calcule le total et donne à chaque part un angle proportionnel, si bien que le disque est toujours rempli à 100 %, quelles que soient les unités (euros, grammes, minutes).
Le dessin est un SVG de 120 unités de côté, tourné d'un quart de tour pour commencer en haut : un cercle par part, de rayon 30 et d'épaisseur de trait 60, ce qui donne un disque plein. La longueur de chaque trait (stroke-dasharray) vaut sa part de la circonférence et son décalage (stroke-dashoffset) la place où elle commence. Dans la légende, le script ajoute une pastille de couleur et le pourcentage, écrit au format de la langue de la page (« 38 % » en français, « 38% » en anglais).
Au départ toutes les parts ont une longueur nulle. Dès que 35 % du disque est visible, la classe pcs-on donne à chaque cercle sa longueur et son décalage finaux, avec une transition de 1 s (ease-out) retardée de 0,2 s puis de 0,2 s de plus par part. Cela ne se produit qu'une fois. Le disque mesure --pcs-size (180 px) sans jamais dépasser la largeur du conteneur ; quand la place manque, la légende passe sous le disque.
Accessibilité
- La légende est le texte du graphique : une vraie liste nommée par son
aria-label, dont chaque élément se lit « Oui 30 % ». Le SVG est masqué aux lecteurs d'écran pour ne pas répéter l'information. - Légende masquée : avec
data-legend="hidden", la liste disparaît de l'écran mais reste lue ; donnez alors une autre clé visuelle aux couleurs (comme les pastilles d'une liste de joueurs). - Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est supprimée et le camembert complet s'affiche tout de suite. - Aucune interaction : rien ne prend le focus, rien ne réagit au survol ou au toucher. Six couleurs se suivent puis se répètent : au-delà de six parts, distinguez-les par la légende.
Compatibilité navigateur
SVG créé par le script, transitions CSS sur stroke-dasharray et stroke-dashoffset, aspect-ratio, IntersectionObserver et Intl.NumberFormat. Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : parts justes (30/25/20/25 → 100 %), deux copies indépendantes, mouvement réduit, 390 px de large, aucune erreur.
Sans IntersectionObserver, le camembert se dévoile dès le chargement. Sans JavaScript, seule la liste des libellés s'affiche, sans disque ni pourcentages.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0227-root">
<div class="pcs-pie"></div>
<ul class="pcs-legend" aria-label="Réponses à l'enquête">
<li data-value="30">Oui</li>
<li data-value="25">Plutôt oui</li>
<li data-value="20">Plutôt non</li>
<li data-value="25">Non</li>
</ul>
</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 |
|---|---|---|
Parts (HTML — un li data-value="…" par part dans .pcs-legend) |
Oui 30, Plutôt oui 25, Plutôt non 20, Non 25 | Le texte du li est le libellé ; les valeurs peuvent être dans n'importe quelle unité, le script les convertit en parts du total. |
Nom de la liste (HTML — aria-label de .pcs-legend) |
« Réponses à l'enquête » | Annoncé par les lecteurs d'écran avant les parts : décrivez ce que montre le graphique. |
Légende visible (HTML — data-legend="hidden" sur la racine) |
Légende affichée | Masque la légende à l'écran tout en la laissant lisible par les lecteurs d'écran. |
Couleurs (CSS — --pcs-c1 à --pcs-c6) |
#6366f1, #8b5cf6, #d946ef, #ec4899, #f43f5e, #06b6d4 | Une couleur par part, dans l'ordre de la liste ; les pastilles de la légende suivent. |
Taille (CSS — --pcs-size, --pcs-min-height) |
180 px, 300 px | Diamètre maximal du disque (jamais plus large que le conteneur) et hauteur minimale de la racine. |
Fond et textes (CSS — --pcs-bg, --pcs-text, --pcs-muted) |
#0a0a0f, blanc à 80 %, blanc à 50 % | Fond de la racine, couleur des libellés et des pourcentages. |
FAQ
flex-direction: column sur .fx-0227-root dans votre CSS.
