106.9K+Baixar
Ir para o guia de uso
SVG Animationspor supermemoryai

SVG Animations Skill.

Crie animações editáveis de caminhos, ícones e ilustrações SVG.

  • SVG
  • Motion vetorial
Baixar OpenDesignVer guia de uso
Análise da fonte · svg-animationsSKILL.md
Tarefa Crie animações editáveis de caminhos, ícones e ilustrações SVG. Entregáveis Marcação SVG editável com o mecanismo de animação escolhido. Antes de começar Traga o SVG ou briefing das formas e especifique gatilho, estado final e destino de incorporação. Marcação inline e incorporação como imagem precisam de verificações separadas de interação, rotulagem e movimento reduzido.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Crie animações editáveis de caminhos, ícones e ilustrações SVG

Explore desenho SVG, movimento em trajetórias, morphing e transformações em grupo, com verificações de incorporação, estados finais e movimento reduzido.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

svg-animations é uma referência prática para motion vetorial escrito à mão. Cobre sistemas de coordenadas SVG, formas, caminhos, grupos, máscaras e filtros, conectando-os à animação CSS ou SMIL. Saídas típicas incluem linhas sendo desenhadas, objetos seguindo caminhos, ícones que mudam e ilustrações animadas.

A fonte explica mecanismos que afetam a correção: a revelação de traço usa o comprimento do caminho, morphing exige estruturas compatíveis de comandos e transformações em grupo podem separar movimento geral de detalhes locais. Também pede rótulos acessíveis e movimento reduzido, que devem ser verificados na incorporação e no modo de animação reais.

Entregas esperadas

  • Marcação SVG editável com o mecanismo de animação escolhido.
  • Animação vetorial de ícone, ilustração, logo ou estado de carregamento.
  • Notas de incorporação e fallback para o contexto web pretendido.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Defina o sistema de coordenadas

    Defina um viewBox e construa a arte com primitivas, caminhos e grupos. Mantenha máscaras, gradientes e filtros reutilizáveis nas definições.

  2. 02
    Escolha o mecanismo de animação

    Use os atributos e o modelo temporal necessários para desenhar traços, seguir caminhos ou fazer morphing. Meça comprimentos e alinhe comandos dos caminhos, em vez de adivinhar.

  3. 03
    Confira o contexto de incorporação

    Inspecione transformações, estados finais e emendas de loop na página real ou incorporação como imagem. Teste rótulos e movimento reduzido para o mecanismo selecionado.

02 Quando usar

Quando usar

Traga o SVG ou briefing das formas e especifique gatilho, estado final e destino de incorporação. Marcação inline e incorporação como imagem precisam de verificações separadas de interação, rotulagem e movimento reduzido.

Bom encaixe

  • Arte vetorial precisa de movimento em pequena escalaUse para ícones, gráficos de carregamento e ilustrações que devem continuar editáveis como marcação.
  • Um efeito de caminho precisa de orientação técnicaA referência explica desenho, movimento e interpolação de formas compatíveis.

Limites a verificar

  • O comportamento do navegador precisa de testesA fonte traz declarações amplas de compatibilidade; recursos individuais de caminhos CSS e SMIL devem ser conferidos nos navegadores de destino.
  • Regras CSS não cobrem todos os motoresUm bloco CSS de movimento reduzido sozinho pode não parar uma timeline SMIL. O mecanismo real precisa de fallback adequado.

Traga estas entradas

  • Arte vetorial ou briefing de formasForneça um SVG ou uma descrição dos caminhos e formas a criar.
  • Comportamento de movimentoEspecifique revelação, loop, morphing ou movimento por caminho e seu gatilho.
  • Destino de incorporaçãoIdentifique SVG inline, incorporação como imagem, navegadores de destino e requisitos de acessibilidade.

03 Decisões importantes

Decisões importantes

  1. A geometria continua editável

    Caminhos e grupos podem ser revisados diretamente, sem substituir um clipe renderizado.

  2. Comprimentos medidos

    Usar o comprimento real do caminho evita traços incompletos ou revelações prematuras.

  3. Transformações separadas

    Movimento de grupo pode coexistir com mudanças locais sem perder a origem pretendida.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

Forneça um SVG ou uma descrição dos caminhos e formas a criar.

Arquivo-fonte original
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use svg-animations para criar uma pequena ilustração de sucesso na minha página de checkout. Desenhe um contorno circular, revele uma marca de verificação e mantenha o estado final. Preserve a arte editável como SVG e meça os comprimentos reais dos caminhos. Forneça incorporação inline com title descritivo e versão estática para movimento reduzido. Teste origens das transformações e conclusão dos traços nos navegadores de destino, sem presumir que todos os recursos se comportam igualmente. Inclua um gatilho de replay para revisão, mas não transforme o indicador de sucesso em loop infinito que disputa atenção.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Confira comprimentos dos caminhos, compatibilidade de comandos de morphing e origens de transformação.
  • Inspecione estados finais e limites de loop no tamanho real de exibição.
  • Teste rotulagem acessível e fallback de movimento reduzido do mecanismo escolhido.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
supermemoryai
Repositório
supermemoryai/skills
Arquivo da skill
SKILL.md
Licença
Not confirmed
Versão revisada
2026-11-02 · 64e285d5a4a5

Notas de leitura

  1. Escopo da licençaDesconhecido; não é domínio público. Podem existir arquivos com outros nomes ou termos externos; a completude não foi estabelecida.
Resumo editorial da fonte
Crie animações editáveis de caminhos, ícones e ilustrações SVG.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Como uma linha se desenha?

A fonte revela um traço mudando stroke-dashoffset em relação ao comprimento medido. Isso controla quanto do caminho fica visível.

Quaisquer duas formas podem fazer morphing?

Interpolação direta de caminhos exige estruturas de comandos compatíveis. Formas com comandos diferentes precisam de preparação ou outra abordagem de morphing.

Uma regra CSS de movimento reduzido basta?

Depende do mecanismo. Animação CSS, JavaScript e SMIL podem exigir tratamentos diferentes; o resultado incorporado deve ser testado em funcionamento.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md