Vendre et promouvoir · Promotions et lancements

Graphique circulaire (Donut Chart) animé en SVG

Visualisez une répartition en pourcentages avec un anneau SVG qui se remplit en segments colorés et infobulles interactives.

Intermédiaire Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un spécialiste de la datavisualisation animée et du graphisme SVG vectoriel interactif.

Contexte

Je dois présenter la répartition d'un budget, d'un marché ou de ventes pour [nom du projet ou secteur]. Les segments à afficher sont : [catégorie 1: X%, catégorie 2: Y%, catégorie 3: Z%]. La palette de couleurs utilise [palette de dégradés contrastés].

Tâche

Génère le code autonome complet (HTML, SVG pur et CSS/JS) d'un graphique circulaire de type anneau (Donut Chart). Au chargement, chaque segment coloré de l'anneau doit se tracer successivement dans le sens horaire à l'aide de 'stroke-dasharray' et 'stroke-dashoffset'. Au centre de l'anneau, le pourcentage total ou le montant s'incrémente de 0 à la valeur finale. Au survol d'un quartier, celui-ci doit se détacher légèrement (expansion de rayon de 6px) et afficher son infobulle.

Format

Un fichier HTML complet et autonome sans bibliothèque externe lourde (ni Chart.js ni D3.js nécessaires), directement réutilisable dans un rapport web ou enregistrable en vidéo.

À remplacer avant de coller : [nom du projet ou secteur] · [catégorie 1: X%, catégorie 2: Y%, catégorie 3: Z%] · [palette de dégradés contrastés]

Pourquoi ça marche mieux

Demande vague

« fais un camembert animé avec des pourcentages »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Détails mathématiques et cinématiques de l'anneau SVG : - Cercle de base : rayon r = 80, circonférence = 2 * PI * 80 = 502.65px. - Chaque segment calcule son périmètre visible : segment1 (45%) = 226.2px, décalage d'origine ajusté pour débuter à midi (-90 degrés). - Animation CSS @keyframes : interpolation fluide de stroke-dashoffset de 502.65 vers la valeur finale en 1,8 seconde avec courbe douce (cubic-bezier 0.16, 1, 0.3, 1). - Centre de l'anneau : affichage en grand du chiffre clé avec libellé en dessous, réagissant dynamiquement au segment survolé. - Légende latérale : pastilles colorées apparaissant en fondu enchaîné de gauche à droite.

Pour améliorer la réponse, relancez

Ajoute un sélecteur permettant de basculer entre vue mensuelle et vue annuelle avec recalcul fluide des segments.
Exporte le composant sous forme de composant React prêt pour un tableau de bord Next.js.

Conseil. Préférez un graphique en anneau (donut) plutôt qu'un disque plein (camembert standard) : le trou central permet d'afficher la valeur globale ou le libellé sans encombrer la périphérie.

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite