Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Techniques d'animation SVG v1.0.0

Utilisez cette ressource pour animer une icône, un logo ou une illustration SVG

Nouveau

  • 463 téléchargements
  • 147 mentions J'aime
  • 103 sauvegardes

4,49 €

Accès à vie à cette ressource, avec ses mises à jour.

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install svg-animation-techniques

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent choisit entre CSS, SMIL et GSAP selon le besoin, puis écrit l'animation : tracé qui se dessine, forme qui se transforme, objet qui suit une courbe. Vous obtenez un fichier HTML autonome avec le SVG intégré, un moyen de figer chaque instant pour le contrôler, et des consignes d'optimisation.

Choisie surtout par

Mise à jour le 2 novembre 2026

Un tracé de logo qui se dessine progressivement dans une page HTML.

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md traduit en français : techniques, choix de l'implémentation, contrat de livraison
  • references/svg-techniques.md : calculs de tracé, comparaison MorphSVG et Flubber, configuration SVGO
  • README.md de présentation du dépôt d'origine

Pour qui

  • Animer la signature ou le logo d'une marque
  • Créer une icône de menu qui devient une croix
  • Faire suivre une courbe à un élément d'illustration

Pas pour qui

  • Animer des photos ou des vidéos
  • Des animations d'interface avec React uniquement, sans SVG

Étiquettes

  • svg
  • animation
  • logo
  • icône
  • gsap

À propos

Vous dites

« Anime mon logo SVG : le tracé se dessine en 1,5 seconde, puis le remplissage apparaît en fondu. »

Un tracé de logo qui se dessine progressivement dans une page HTML.

Skill publiée par iart-ai sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Votre fichier SVG ou une description de l'illustration et Le mouvement voulu et sa durée

Comment l'utiliser

  1. Installez la skill dans le dossier de skills de votre agent.
  2. Fournissez votre SVG et décrivez le mouvement voulu.
  3. Ouvrez le fichier HTML produit et validez le rendu au début, au milieu et à la fin.

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • README.md0 Ko
  • references/svg-techniques.md9 Ko
  • SKILL.md10 Ko

Origine et licence

Modifié par PalateKit

Auteur
iart-ai
Source
github.com/iart-ai/web-animation-skills/tree/b6dba3eb759726845a44163ff0bad70dd9e7fbb6/skills/svg-animation
Licence
MIT

Notice

Version modifiée de « svg-animation » (iart-ai, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Faut-il installer quelque chose ?

Non pour le CSS et le SMIL. GSAP se charge depuis un CDN dans le fichier HTML ; MorphSVG est gratuit depuis GSAP 3.12.

La skill mentionne un dossier scripts/, est-il fourni ?

Non, il n'est pas livré. Il ne sert qu'à capturer des images de contrôle ; l'animation fonctionne sans, avec une capture manuelle ou Playwright.