Motion design et vidéo · Graphiques et chiffres animés

Graphique circulaire Donut animé en SVG (Master Prompt Donut Chart)

Le prompt d'ingénierie complet pour concevoir un graphique circulaire en anneau SVG avec déploiement trigonométrique successif et expansion radiale au survol.

Intermédiaire Essayé le 28 octobre 2026

Master Prompt d’ingénierie Motion Design

Prompt Master Motion Design (Architecture complète)

Prêt à copier dans Claude 3.7 Sonnet, Cursor ou votre environnement de code

<inputs>Paramètres d’entrée requis

Demande-moi d'abord : les 3 à 6 catégories à afficher avec leurs pourcentages respectifs [données de répartition, ex: Produit A 45%, Produit B 30%, Produit C 25%], la palette chromatique (dégradés harmonieux ou couleurs contrastées), le libellé central de l'anneau, et l'ambiance de fond (sombre analytique ou clair épuré).

</inputs>

<direction>Direction artistique & Règles visuelles

Datavisualisation circulaire de prestige (Donut Chart de niveau rapport annuel Stripe). Rigueur mathématique et raffinement visuel. L'anneau SVG ne se contente pas d'apparaître en bloc : chaque quartier coloré se déploie successivement le long de la circonférence dans le sens des aiguilles d'une montre à l'aide de coordonnées polaires et de décalages de tirets vectoriels. L'espace central héberge le total global dynamique qui s'incrémente en temps réel. Au survol d'un quartier, celui-ci s'écarte du centre de 8px (expansion radiale) avec mise en valeur de son pourcentage et affichage d'une infobulle contextuelle élégante. Strictement banni : camemberts pleins désuets sans trou central, couleurs criardes non coordonnées, légendes coupées ou tronquées, et animations saccadées.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Durée totale 10 secondes en démonstration complète : - 0.0s - 2.5s (Le tracé circulaire) : L'anneau SVG (rayon R=100, circonférence 2*PI*R = 628.32px) se trace segment par segment avec stroke-dashoffset de 628.32 à sa valeur finale. Chaque quartier commence exactement là où s'est arrêté le précédent. - 2.5s - 5.0s (Le compteur central) : Le chiffre central principal passe de 0 à la valeur globale avec séparateurs décimaux nets et libellé en petit capitales en dessous. - 5.0s - 8.5s (L'inspection interactive) : Un curseur simulé survole le segment majoritaire. Le quartier s'extrait vers l'extérieur avec une ombre douce projetée sur le fond, et l'infobulle détaille le montant exact. - 8.5s - 10.0s (Stabilisation finale) : Légende latérale synchronisée avec pastilles colorées animées en cascade.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML/SVG/JavaScript pur, sans aucune dépendance à une bibliothèque lourde (ni Chart.js ni D3.js). 2. Trigonométrie SVG pure : calcul des angles de départ et de fin en radians pour positionner précisément les infobulles et les séparations d'espaces fins (gap de 2px entre segments). 3. Rendu 60fps Playwright pour exportation vidéo de rapports d'activité.

</build>

<gotchas>Pièges techniques & Erreurs à éviter

Appliquez une rotation initiale de -90 degrés sur le conteneur SVG afin que le premier segment commence son tracé exactement au sommet de l'anneau (à midi) et non sur le côté droit (à 3 heures).

</gotchas>

<start>Consigne d’amorçage & Démarrage

Demande-moi d'abord mes catégories et leurs pourcentages (<inputs>), puis confirme les calculs d'angles avant de générer le code source.

</start>

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