106.9K+Scarica
Vai alla guida all’uso
SVG Animationsdi supermemoryai

SVG Animations Skill.

Crea animazioni modificabili di tracciati, icone e illustrazioni SVG.

  • SVG
  • Animazione vettoriale
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · svg-animationsSKILL.md
Attività Crea animazioni modificabili di tracciati, icone e illustrazioni SVG. Risultati Markup SVG modificabile con il meccanismo di animazione scelto. Prima di iniziare Fornisci SVG o brief delle forme e specifica attivazione, stato finale e destinazione. Markup inline e integrazione come immagine richiedono verifiche separate di interazione, etichette e movimento ridotto.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Crea animazioni modificabili di tracciati, icone e illustrazioni SVG

Esplora disegno SVG, movimento sui tracciati, morphing e trasformazioni di gruppo, con controlli su integrazione, stati finali e movimento ridotto.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

svg-animations è un riferimento pratico per animazioni vettoriali scritte a mano. Copre coordinate SVG, forme, tracciati, gruppi, maschere e filtri, collegandoli a CSS o SMIL. Gli output tipici comprendono linee che si disegnano, oggetti lungo tracciati, icone mutevoli e illustrazioni animate.

La fonte spiega meccanismi decisivi per la correttezza: il disegno progressivo usa la lunghezza del tracciato, il morphing richiede comandi compatibili e le trasformazioni di gruppo separano movimento generale e dettagli locali. Richiede anche etichette accessibili e movimento ridotto, da verificare nella modalità reale di integrazione e animazione.

Risultati attesi

  • Markup SVG modificabile con il meccanismo di animazione scelto.
  • Un’animazione vettoriale di icona, illustrazione, logo o stato di caricamento.
  • Note di integrazione e alternativa per il contesto web previsto.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Definire le coordinate

    Definisci un viewBox e costruisci con primitive, tracciati e gruppi. Conserva maschere, gradienti e filtri riutilizzabili nelle definizioni.

  2. 02
    Scegliere il meccanismo

    Usa attributi e modello temporale necessari per disegno dei tratti, movimento lungo un tracciato o morphing. Misura lunghezze e allinea i comandi invece di indovinare.

  3. 03
    Controllare l’integrazione

    Esamina trasformazioni, stati finali e raccordi del ciclo nella pagina o immagine realmente integrata. Testa etichette e movimento ridotto per il meccanismo scelto.

02 Quando usarlo

Quando usarla

Fornisci SVG o brief delle forme e specifica attivazione, stato finale e destinazione. Markup inline e integrazione come immagine richiedono verifiche separate di interazione, etichette e movimento ridotto.

Adatta a

  • La grafica vettoriale richiede piccoli movimentiUsala per icone, caricamenti e illustrazioni da mantenere modificabili come markup.
  • Un effetto sul tracciato richiede guida tecnicaIl riferimento spiega disegno, movimento e interpolazione tra forme compatibili.

Limiti da verificare

  • Il comportamento dei browser va testatoLa fonte contiene dichiarazioni generali di compatibilità; singole funzionalità CSS dei tracciati e SMIL vanno verificate nei browser previsti.
  • CSS non copre tutti i motoriUn blocco CSS per movimento ridotto potrebbe non fermare una timeline SMIL. Il meccanismo effettivo richiede un’alternativa adeguata.

Cosa portare

  • Grafica vettoriale o brief delle formeFornisci SVG o descrivi tracciati e forme da creare.
  • Comportamento animatoSpecifica comparsa, ciclo, morphing o movimento lungo un tracciato e il relativo trigger.
  • Destinazione d’integrazioneIdentifica SVG inline, immagine, browser previsti e requisiti di accessibilità.

03 Decisioni importanti

Le decisioni importanti

  1. Geometria modificabile

    Tracciati e gruppi si rivedono direttamente invece di sostituire un clip renderizzato.

  2. Lunghezze misurate

    La lunghezza reale evita tratti incompleti o comparse premature.

  3. Trasformazioni separate

    Il movimento di gruppo può convivere con modifiche locali senza perdere l’origine prevista.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Fornisci SVG o descrivi tracciati e forme da creare.

File sorgente originale
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa svg-animations per creare una piccola illustrazione di successo per la pagina di pagamento. Disegna un contorno circolare, rivela una spunta e mantieni lo stato finale. Conserva SVG modificabile e misura le lunghezze reali. Fornisci integrazione inline con titolo descrittivo e versione statica per movimento ridotto. Testa origini delle trasformazioni e completamento dei tratti nei browser previsti, senza presumere comportamenti identici. Includi un trigger di replay per la revisione, senza trasformare l’indicatore in un ciclo infinito che richiama l’attenzione.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Controlla lunghezze, compatibilità dei comandi di morphing e origini delle trasformazioni.
  • Esamina stati finali e limiti del ciclo alle dimensioni reali.
  • Testa etichette accessibili e alternativa di movimento ridotto del meccanismo scelto.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
supermemoryai
Repository
supermemoryai/skills
File della skill
SKILL.md
Licenza
Not confirmed
Snapshot esaminato
2026-11-02 · 64e285d5a4a5

Note di lettura

  1. Ambito della licenzaSconosciuta, non di pubblico dominio. Possono esistere altri nomi di file o condizioni esterne; la completezza non è accertata.
Sintesi editoriale della fonte
Crea animazioni modificabili di tracciati, icone e illustrazioni SVG.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Come si disegna una linea?

La fonte rivela il tratto cambiando stroke-dashoffset rispetto alla lunghezza misurata. Questo controlla la parte visibile del tracciato.

Due forme qualsiasi possono trasformarsi?

L’interpolazione diretta richiede comandi compatibili. Forme con comandi differenti necessitano preparazione o un altro metodo di morphing.

Basta una regola CSS per movimento ridotto?

Dipende dal meccanismo. CSS, JavaScript e SMIL possono richiedere gestioni diverse: il risultato integrato va quindi testato.

OpenDesign

Tieni insieme il brief e il lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md