Vendre et promouvoir · Promotions et lancements

Graphique et courbe de données animés en SVG/Canvas

Présentez des chiffres et indicateurs de performance avec une animation progressive de courbes et compteurs chiffrés.

Intermédiaire Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un expert en datavisualisation et motion design interactif sur le web.

Contexte

Je dois illustrer les résultats d’une entreprise ou d’un projet : [chiffres à valoriser, ex: croissance du chiffre d’affaires de 1,2M à 4,8M ou nombre d’utilisateurs actifs passés de 500 à 10 000]. Je veux intégrer cette animation dans une présentation vidéo ou un site vitrine avec la palette : [couleur de fond sombre ou claire, couleur de la courbe et de la lueur].

Tâche

Crée le code autonome (HTML5, SVG animé ou Canvas) d’une courbe de progression fluide qui se trace progressivement de gauche à droite avec effet de gradient lumineux, points clés qui surgissent avec un compteur chiffré qui défile en temps réel jusqu’à la valeur finale.

Format

Un fichier HTML complet et autonome exécutable directement dans le navigateur, comprenant le tracé SVG, l’animation CSS par stroke-dasharray / stroke-dashoffset et un script JavaScript léger pour le défilement fluide des compteurs (effet d’accélération et décélération).

Pourquoi ça marche mieux

Demande vague

« anime un graphique avec des chiffres qui montent »

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.

Exemple de rendu technique produit : - Tracé SVG vectoriel responsive avec viewBox 0 0 800 400. - Courbe de Bézier cubique avec dégradé linéaire vibrant (bleu vers turquoise ou rose néon). - Déclenchement de l'animation au chargement : tracé effectué en 2,4 secondes (courbe cubic-bezier 0.25, 1, 0.5, 1). - Points de données surgissant avec effet d'onde radiale (pulse). - Compteur JavaScript incrémentiel de 0 à la valeur cible avec séparateurs de milliers et unité personnalisable. - Fond avec grille subtile en pointillés et halo lumineux doux (drop-shadow). Le code fonctionne immédiatement en double-cliquant sur le fichier .html et peut être capturé en vidéo ou intégré directement dans une application web.

Pour améliorer la réponse, relancez

Ajoute un comparatif avec une deuxième courbe d’une autre couleur représentant l’année précédente.
Transforme la courbe en graphique à barres verticales animées en cascade.

Conseil. Pour un tracé SVG parfaitement fluide, calculez la longueur exacte du chemin avec la méthode JavaScript path.getTotalLength() et assignez-la dynamiquement à stroke-dasharray et stroke-dashoffset.

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