106.9K+Descargar
Ir a la guía de uso
SVG Animationspor supermemoryai

SVG Animations Skill.

Crea animaciones editables de trazados, iconos e ilustraciones SVG.

  • SVG
  • Animación vectorial
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · svg-animationsSKILL.md
Tarea Crea animaciones editables de trazados, iconos e ilustraciones SVG. Resultados Marcado SVG editable con el mecanismo de animación elegido. Antes de empezar Aporta SVG o brief de formas y especifica disparador, estado final y destino de integración. El marcado inline y la integración como imagen necesitan comprobaciones separadas de interacción, etiquetas y movimiento reducido.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Crea animaciones editables de trazados, iconos e ilustraciones SVG

Explora dibujo SVG, movimiento por trazados, morphing y transformaciones agrupadas, con comprobaciones de integración, estados finales y movimiento reducido.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

svg-animations es una referencia práctica para animación vectorial escrita a mano. Cubre coordenadas SVG, formas, trazados, grupos, máscaras y filtros, y los conecta con CSS o SMIL. Sus resultados habituales incluyen líneas que se dibujan, objetos siguiendo rutas, iconos cambiantes e ilustraciones animadas.

La fuente explica mecanismos que determinan la corrección: el dibujo progresivo usa la longitud del trazado, el morphing necesita comandos compatibles y las transformaciones agrupadas separan movimiento general y detalles locales. También pide etiquetas accesibles y movimiento reducido, que deben verificarse en la integración y el mecanismo reales.

Entregables esperados

  • Marcado SVG editable con el mecanismo de animación elegido.
  • Una animación vectorial de icono, ilustración, logo o estado de carga.
  • Notas de integración y alternativa para el contexto web previsto.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Definir coordenadas

    Define un viewBox y construye con primitivas, trazados y grupos. Conserva máscaras, degradados y filtros reutilizables en las definiciones.

  2. 02
    Elegir mecanismo de animación

    Usa los atributos y tiempos necesarios para dibujar trazos, seguir rutas o transformar formas. Mide longitudes y alinea comandos de trazado en vez de adivinar.

  3. 03
    Comprobar la integración

    Inspecciona transformaciones, estados finales y uniones del bucle en la página o imagen integradas realmente. Prueba etiquetas y movimiento reducido con el mecanismo elegido.

02 Cuándo usarlo

Cuándo usarlo

Aporta SVG o brief de formas y especifica disparador, estado final y destino de integración. El marcado inline y la integración como imagen necesitan comprobaciones separadas de interacción, etiquetas y movimiento reducido.

Buen encaje

  • El arte vectorial necesita movimiento a pequeña escalaÚsalo para iconos, gráficos de carga e ilustraciones que deban seguir editables como marcado.
  • Un efecto de trazado necesita orientación técnicaLa referencia explica dibujo, movimiento e interpolación de formas compatibles.

Límites que conviene comprobar

  • Debe probarse en navegadoresLa fuente hace afirmaciones amplias de compatibilidad; las funciones concretas de trazados CSS y SMIL deben comprobarse en los navegadores objetivo.
  • CSS no cubre todos los motoresUn bloque CSS de movimiento reducido puede no detener una línea de tiempo SMIL. El mecanismo real necesita una alternativa adecuada.

Aporta estos datos

  • Arte vectorial o brief de formasAporta un SVG o describe los trazados y formas que crear.
  • Comportamiento de animaciónEspecifica aparición, bucle, morphing o seguimiento de ruta y su disparador.
  • Destino de integraciónIdentifica SVG inline, imagen, navegadores objetivo y requisitos de accesibilidad.

03 Decisiones importantes

Decisiones importantes

  1. Geometría editable

    Los trazados y grupos se corrigen directamente en vez de sustituir un clip renderizado.

  2. Longitudes medidas

    Usar la longitud real evita trazos incompletos o apariciones prematuras.

  3. Transformaciones separadas

    El movimiento de grupo puede coexistir con cambios locales sin perder el origen previsto.

04 Ejemplo de brief

Prueba con un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Aporta un SVG o describe los trazados y formas que crear.

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

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa svg-animations para crear una pequeña ilustración de éxito para mi página de pago. Dibuja un contorno circular, revela una marca de verificación y mantén el estado final. Conserva SVG editable y mide longitudes reales. Proporciona integración inline con título descriptivo y versión estática para movimiento reducido. Prueba orígenes de transformación y finalización de trazos en navegadores objetivo sin asumir comportamiento idéntico de todas las funciones. Incluye un disparador de repetición para revisar, pero no conviertas el indicador de éxito en un bucle infinito que reclame atención.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Comprueba longitudes, compatibilidad de comandos de morphing y orígenes de transformación.
  • Inspecciona estados finales y límites de bucle al tamaño real.
  • Prueba etiquetado accesible y alternativa de movimiento reducido del mecanismo elegido.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
supermemoryai
Repositorio
supermemoryai/skills
Archivo del skill
SKILL.md
Licencia
Not confirmed
Versión revisada
2026-11-02 · 64e285d5a4a5

Notas de lectura

  1. Alcance de la licenciaDesconocida, no es dominio público. Puede haber otros nombres de archivo o condiciones externas; no se ha establecido la exhaustividad.
Resumen editorial de la fuente
Crea animaciones editables de trazados, iconos e ilustraciones SVG.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Cómo se dibuja una línea?

La fuente revela un trazo cambiando stroke-dashoffset respecto a su longitud medida. Esto controla cuánto trazado queda visible.

¿Pueden transformarse dos formas cualesquiera?

La interpolación directa requiere comandos compatibles. Formas con comandos distintos necesitan preparación u otra técnica de morphing.

¿Basta una regla CSS de movimiento reducido?

Depende del mecanismo. CSS, JavaScript y SMIL pueden requerir tratamientos distintos; debe probarse el resultado integrado.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md