106.9K+Télécharger
Aller au guide d’utilisation
SVG Animationspar supermemoryai

SVG Animations Skill.

Créez des animations modifiables de tracés, icônes et illustrations SVG.

  • SVG
  • Animation vectorielle
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · svg-animationsSKILL.md
Tâche Créez des animations modifiables de tracés, icônes et illustrations SVG. Résultats Du balisage SVG modifiable avec le mécanisme d’animation choisi. Avant de commencer Fournissez le SVG ou un brief de forme, en précisant déclencheur, état final et cible d’intégration. Balisage en ligne et intégration comme image nécessitent des contrôles distincts d’interaction, de libellés et de réduction des animations.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Créez des animations modifiables de tracés, icônes et illustrations SVG

Explorez tracés SVG, mouvement sur chemin, morphing et transformations groupées, avec contrôles d’intégration, d’état final et de réduction des animations.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

svg-animations est une référence pratique pour l’animation vectorielle écrite à la main. Il couvre systèmes de coordonnées SVG, formes, tracés, groupes, masques et filtres, puis les relie aux animations CSS ou SMIL. Les sorties typiques comprennent lignes qui se dessinent, objets suivant un chemin, icônes évolutives et illustrations animées.

La source explique les mécanismes déterminants pour la justesse : un tracé progressif utilise sa longueur, un morphing exige des structures de commandes compatibles, et les transformations groupées séparent mouvement global et détails locaux. Elle demande aussi des libellés accessibles et une réduction des animations, à vérifier dans le mode réel d’intégration et d’animation.

Livrables attendus

  • Du balisage SVG modifiable avec le mécanisme d’animation choisi.
  • Une animation vectorielle d’icône, d’illustration, de logo ou d’état de chargement.
  • Des notes d’intégration et d’alternative pour le contexte web prévu.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Définir les coordonnées

    Définissez un viewBox et construisez l’illustration à partir de primitives, tracés et groupes. Gardez masques, dégradés et filtres réutilisables dans les définitions.

  2. 02
    Choisir le mécanisme d’animation

    Utilisez les attributs et le modèle temporel requis pour dessiner les contours, suivre un chemin ou transformer les formes. Mesurez les longueurs et alignez les commandes de tracé au lieu de deviner.

  3. 03
    Vérifier le contexte d’intégration

    Examinez transformations, états finaux et raccords de boucle dans la page ou l’intégration d’image réelle. Testez libellés et réduction des animations pour le mécanisme choisi.

02 Cas d’usage

Quand l’utiliser

Fournissez le SVG ou un brief de forme, en précisant déclencheur, état final et cible d’intégration. Balisage en ligne et intégration comme image nécessitent des contrôles distincts d’interaction, de libellés et de réduction des animations.

Un bon choix

  • Une illustration vectorielle demande un mouvement limitéUtilisez-le pour icônes, graphismes de chargement et illustrations devant rester modifiables en balisage.
  • Un effet de tracé nécessite des indications techniquesLa référence explique dessin progressif, déplacement et interpolation entre formes compatibles.

Limites à vérifier

  • Le comportement navigateur doit être testéLa source contient des affirmations générales de compatibilité ; les fonctions individuelles de tracé CSS et de SMIL doivent être vérifiées dans les navigateurs cibles.
  • Le CSS ne couvre pas tous les moteursUn bloc CSS de réduction des animations peut ne pas arrêter une timeline SMIL. Le mécanisme réel exige une alternative adaptée.

Éléments à fournir

  • Illustration vectorielle ou brief de formeFournissez un SVG ou décrivez les tracés et formes à créer.
  • Comportement animéPrécisez apparition, boucle, morphing ou suivi de chemin, et son déclencheur.
  • Cible d’intégrationIdentifiez SVG en ligne ou image, navigateurs cibles et exigences d’accessibilité.

03 Décisions importantes

Les décisions importantes

  1. Géométrie modifiable

    Tracés et groupes se révisent directement au lieu de remplacer un clip rendu.

  2. Longueurs mesurées

    La longueur réelle du tracé évite un contour incomplet ou une apparition prématurée.

  3. Transformations séparées

    Le mouvement de groupe peut coexister avec des changements locaux sans perdre l’origine prévue.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Fournissez un SVG ou décrivez les tracés et formes à créer.

Fichier source amont
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise svg-animations pour créer une petite illustration de succès pour ma page de paiement. Dessine un contour circulaire, révèle une coche puis maintiens l’état terminé. Garde l’illustration modifiable en SVG et mesure les longueurs réelles des tracés. Fournis une intégration en ligne avec titre descriptif et une version statique pour la réduction des animations. Teste les origines de transformation et l’achèvement des contours dans les navigateurs cibles sans supposer que toutes les fonctions se comportent à l’identique. Inclus un déclencheur de relecture pour l’examen, sans transformer l’indicateur de succès en boucle infinie captant l’attention.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Vérifiez longueurs, compatibilité des commandes de morphing et origines de transformation.
  • Examinez états finaux et raccords de boucle aux dimensions réelles d’affichage.
  • Testez libellés accessibles et alternative de réduction des animations propre au mécanisme.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
supermemoryai
Dépôt
supermemoryai/skills
Fichier du skill
SKILL.md
Licence
Not confirmed
Version examinée
2026-11-02 · 64e285d5a4a5

Notes de lecture

  1. Périmètre de la licenceInconnue, pas du domaine public. D’autres noms de fichiers ou conditions externes peuvent exister ; l’exhaustivité n’a pas été établie.
Résumé éditorial de la source
Créez des animations modifiables de tracés, icônes et illustrations SVG.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Comment une ligne se dessine-t-elle ?

La source révèle un contour en modifiant stroke-dashoffset par rapport à sa longueur mesurée. Cela détermine la portion visible du tracé.

Peut-on transformer n’importe quelles formes l’une en l’autre ?

L’interpolation directe exige des structures de commandes compatibles. Des tracés aux commandes différentes nécessitent une préparation ou une autre méthode de morphing.

Une règle CSS de réduction des animations suffit-elle ?

Cela dépend du mécanisme. CSS, JavaScript et SMIL peuvent nécessiter des traitements différents ; il faut donc tester le résultat intégré.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md