SVG animados escritos como código real: descárgalos, cópialos, modifícalos

Generador de animaciones SVG — una frase y empieza a moverse

Describe la situación con tus palabras y la IA escribe un SVG animado completo.
Para webs, apps, contenido para redes y demos de producto: se descarga, se copia y se sigue editando.

Crear una animaciónVer ejemplos animados

¿Ya tienes un logo? Cambia a «Animar mi SVG» y súbelo.

Esta generación: 10 credits

Haz clic en cualquier ejemplo para ver su código real, o describe arriba tu propia idea.

Cada ejemplo de abajo es un SVG reproduciéndose de verdad

Ni vídeo ni GIF: cada uno se reproduce solo y pesa apenas unos KB.

Dos formas de usarlo

Generar una animación nueva a partir de una frase o subir un SVG existente para añadirle movimiento. Ambos caminos sirven para crear plantillas comerciales reutilizables.

Del texto a la animación

Un diagrama, un logo, un icono de carga, un mapa: describe la escena con tus palabras y recibe un SVG en movimiento en segundos.

Del SVG estático a la animación

¿Ya tienes un SVG estático? Súbelo, cambia a «Animar mi SVG» y añadimos el movimiento sin tocar tus trazados.

Demos con valor comercial

No basta con que se mueva. El valor está en poder reutilizarlo y cambiarle el contenido.

Estas demos representan patrones de animación SVG con una intención comercial clara: lanzamientos de apps, packaging de producto, intros de logo, estado de pedidos y creatividades para redes. La verdadera oportunidad es un sistema de plantillas donde el usuario sustituye imágenes, textos, logos, colores, ritmo y formato de exportación.

Demo SVG animada de una campaña de app con varias pantallas
Lanzamiento de app / SaaS

Campaña de app con varias pantallas

Varias pantallas móviles y capas de mensaje explican un producto en segundos: útil para páginas de aterrizaje, publicidad de pago y vistas previas en las tiendas de apps.

Contexto de uso
Apps móviles, productos SaaS, herramientas de IA, herramientas de productividad, campañas de lanzamiento.
Elementos intercambiables
Capturas, titular, argumentos de venta, fondo, colores de marca, CTA, formato horizontal o vertical.
Cómo está hecho
Keyframes CSS puros, 14 KB. El cambio de pantalla, la cascada de texto y el latido del CTA van cada uno a su propio ritmo: basta con ponerlo en una etiqueta img.
Salidas recomendadas
SVG para la web, GIF publicitario, MP4 corto, creatividad para tiendas de apps.
Demo SVG animada de una lata de producto
DTC / comercio electrónico

Packaging de producto como visual principal

El envase, los detalles de fruta, las líneas orbitales y una ligera flotación convierten una ficha de producto estática en un visual principal reutilizable.

Contexto de uso
Alimentación y bebidas, belleza, cuidado personal, juguetes, electrónica de consumo, lanzamientos de producto.
Elementos intercambiables
Imagen del producto, nombre del sabor, fondo, elementos decorativos, distintivos de reclamo, ritmo de los brillos.
Cómo está hecho
Keyframes CSS puros, 13 KB. La flotación de la lata, el giro de la fruta y el brillo que recorre la superficie son tres pistas independientes: cambiar la imagen del producto no rompe el movimiento.
Salidas recomendadas
Cabecera de la página de aterrizaje, visual de ficha de producto, anuncio social, página de campaña.
Demo SVG animada de tarjetas de funciones para móvil
Marketing de producto

Tarjetas de funciones para móvil

Las tarjetas se deslizan, se apilan y destacan los argumentos, de modo que las funciones abstractas de una app se entienden mejor.

Contexto de uso
Onboarding de apps, notas de versión, secciones de funciones SaaS, páginas de actualización.
Elementos intercambiables
Tarjetas de funciones, iconos, marco del dispositivo, título, texto, orden de las tarjetas, ritmo de entrada.
Cómo está hecho
Keyframes CSS puros, 8 KB. Las tarjetas entran escalonadas con transform y opacity: para añadir una cuarta función basta con duplicar un grupo.
Salidas recomendadas
Ilustración de página de producto, material de onboarding, vídeo explicativo, imagen del centro de ayuda.
Demo de animación SVG con revelado de logo
Motion de marca

Intro de vídeo con revelado de logo

El revelado de logo es de lo más fácil de monetizar como plantilla: subes una marca y generas cabeceras, cierres y gráficos de canal.

Contexto de uso
Vídeos corporativos, intros de YouTube, aperturas de cursos, eventos de lanzamiento, mercados de plantillas de marca.
Elementos intercambiables
Logo SVG, color de marca, fondo, velocidad del trazo, tiempo de permanencia, versión de intro o de cierre.
Cómo está hecho
Keyframes CSS puros, 9 KB. La marca se traza con stroke-dashoffset y las letras se encadenan con animation-delay. Cambias la marca y el ritmo se mantiene.
Salidas recomendadas
Intro en SVG, cabecera en MP4, kit de motion de marca, plantilla para creadores.
Demo SVG de una tarjeta de seguimiento de envío
Estado de interfaz

Tarjeta de estado de envío y pedido

El movimiento de estado tiene valor comercial real: pedidos, entregas, despliegues, aprobaciones y pagos completados necesitan una respuesta clara.

Contexto de uso
Envíos de comercio electrónico, estado del pedido, pago completado, progreso de despliegue, flujos de aprobación.
Elementos intercambiables
Número de pasos, nombres de estado, color de éxito, color de error, iconos, texto de cada hito.
Cómo está hecho
Keyframes CSS puros, 13 KB. Una sola línea de tiempo controla a la vez el relleno de la línea y el estado de los distintivos, así que añadir o quitar pasos es sencillo.
Salidas recomendadas
Componente SaaS, animación del proceso de pago, centro de notificaciones, tarjeta de estado de transacción.
Demo SVG de una plantilla animada para redes sociales
Creadores / redes

Plantilla animada para redes sociales

Las plantillas para redes funcionan mejor como biblioteca organizada por sector y formato, donde el usuario sustituye imágenes, titulares y etiquetas.

Contexto de uso
Instagram, TikTok, adelantos de campaña, calendarios de contenido de marca, material para creadores.
Elementos intercambiables
Imagen, titular, etiquetas, formato de cada plataforma, colores de marca, ritmo de entrada, comportamiento del bucle.
Cómo está hecho
Keyframes CSS puros, 9 KB. La zona de imagen se acerca despacio mientras las capas de texto se encadenan: cambias la foto y el texto sin tocar la animación.
Salidas recomendadas
Publicaciones en redes, creatividades publicitarias, plantillas para creadores, material de campaña.
Prompts de animación listos para reescribir

Empieza por situaciones reales de negocio

No empieces por «una animación bonita». Elige primero el momento de negocio y después cambia el objeto, los colores de marca, el texto y el ritmo: así el SVG generado se parecerá mucho más a algo que puedas publicar.

¿Qué es el generador de animaciones SVG?

Los editores con línea de tiempo llevan horas de aprendizaje y los vídeos exportados se ven borrosos al ampliarlos. Aquí una frase basta para obtener un SVG animado de verdad: código legible que puedes editar e incrustar donde quieras.

De las palabras al movimiento en un minuto

Escribe qué debe moverse y cómo debe sentirse. La IA diseña las formas y escribe cada keyframe: la mayoría de las animaciones están listas en bastante menos de un minuto.

Anima el SVG que ya tienes

Sube un logo, un icono o una ilustración y describe el movimiento: un trazado que se dibuja, una flotación suave, elementos que giran. Tus formas originales quedan intactas y solo se añade la animación.

Código real, no una caja negra

Cambia a la vista de código cuando quieras: marcado SVG limpio con los keyframes CSS dentro. Cópialo directamente en tu proyecto o ajusta tú mismo tiempos y colores.

Más ligero que un GIF, más nítido que un vídeo

Un SVG animado de aquí pesa unas pocas decenas de kilobytes, se amplía a cualquier resolución sin perder definición y se repite sin necesidad de reproductor de vídeo.

Un generador, cuatro tipos de trabajo con movimiento

Desde los últimos retoques de una web hasta los esquemas para clase: el mismo flujo de una sola frase cubre las tareas de animación que surgen de verdad.

Indicador de carga animado: un anillo con degradado y puntos en órbita

Estados y flujos de interfaz

Progreso del pago, pasos de registro, indicadores de carga, estados vacíos, 404 animados. Esos momentos en los que alguien espera o duda: colócalo en una etiqueta img y se reproduce solo, sin nada que conectar ni mantener.

Diagrama animado del sistema solar con 8 planetas orbitando alrededor del sol

Esquemas para enseñanza y contenido

Sistemas solares en órbita, líneas de tiempo animadas, esquemas de funcionamiento, gráficos que crecen. Describe el concepto y lleva el resultado a tus diapositivas, artículos o páginas de curso: se reproduce solo, sin reproductor de vídeo.

Animación de máquina de escribir que revela «Hello World» en naranja intenso

Momentos de marca y acabado del sitio

Caligrafía que se escribe sola, titulares cinéticos, revelados de logo, fondos de cabecera en movimiento. Nítidos como vectores en cualquier pantalla y lo bastante ligeros para cargar al instante.

Un icono de líneas con montaña y sol que se dibuja solo, se desvanece y vuelve a empezar

Pégalo donde sea y sigue moviéndose

Un README de GitHub, una página de Notion, un documento compartido, una presentación. La mayoría de los archivos animados se quedan quietos en cuanto salen de la web para la que se hicieron; estos se llevan el movimiento consigo.

Un prompt, todos los motores

Eliges un nivel, no un identificador de modelo. Cambia de motor y vuelve a lanzar el mismo prompt para comparar por tu cuenta.

Rápido — Gemini 3.6 Flash

Velocidad ante todo, 10 créditos. Ideal cuando estás afinando la redacción y quieres ver pronto el siguiente intento.

Equilibrado — Claude Sonnet 5 (por defecto)

El nivel por defecto, 10 créditos, y el único motor que hemos probado de principio a fin con nuestros prompts de animación: marcado limpio, keyframes CSS fiables y normalmente entre 12 y 32 segundos.

Máxima calidad — Kimi K3

15 créditos, con razonamiento activado. Más lento y más caro, pensado para escenas cargadas con muchos elementos que coreografiar.

Llévatelo a donde quieras

El SVG es la salida nativa. El GIF y el MP4 se generan directamente en tu navegador: sin créditos extra y sin subir nada.

SVG

El resultado de verdad. Los keyframes CSS viven dentro del archivo, así que se reproduce sin librería de ejecución: ponlo en una etiqueta img o pégalo en línea.

GIF

Un clic, para los sitios que no aceptan SVG: mensajería y redes sociales. Se genera fotograma a fotograma desde tu animación, en tu propio equipo.

MP4

Para vídeo corto, presentaciones y material de curso. Se codifica en local en los navegadores compatibles; el SVG y el GIF funcionan igualmente en todas partes.

Todo lo necesario para poner vectores en movimiento

Es más que una imagen que se mueve: cubre el prompt, la vista previa, el código fuente, la exportación y la reutilización en un solo flujo.

Plantillas que hablan tu idioma de trabajo

Indicador de carga, logo que se dibuja, texto de máquina de escribir, fondo de olas, revelado de línea, gráfico que crece: elige una plantilla, ajusta las palabras y genera.

CSS puro dentro del SVG

Sin JavaScript, sin recursos externos, sin librería de ejecución. La animación es CSS declarativo dentro del propio SVG: seguro de incrustar en línea, fácil de cachear y se reproduce incluso dentro de una etiqueta img.

Nítido desde el favicon hasta la valla publicitaria

Es vectorial: el mismo archivo se mantiene perfectamente definido como icono de 16 px o como cabecera a pantalla completa. Sin volver a exportar para cada tamaño.

Vista de código y copia en un clic

Ve exactamente lo que escribió la IA. Copia el marcado a tu base de código, cambia una duración, sustituye un color: se lee como código escrito con cuidado por una persona.

Convierte tu SVG estático en movimiento

El camino de SVG a animación: sube cualquier SVG existente y describe el movimiento. Perfecto para logos que ya están publicados e iconos que ya te gustan.

Cambia el motor detrás del prompt

Por defecto, Claude Sonnet 5 escribe el marcado: el código vectorial preciso es justo el punto fuerte de esa familia de modelos. ¿Prefieres algo más rápido o más potente? Cambia de nivel o indica un motor directamente en los ajustes avanzados.

Generador de animaciones SVG — preguntas frecuentes

Preguntas habituales sobre la generación de SVG animados. ¿Tienes más dudas? Escribe a support@imagesv2.ai.

Donde mejor funciona es en el movimiento declarativo: animaciones que reproducen una coreografía definida.
(1) Recursos web y de interfaz: indicadores de carga, logos que se dibujan, fondos de olas, 404 animados.
(2) Efectos de texto: revelados de máquina de escribir, tipografía cinética, caligrafía que se escribe sola.
(3) Esquemas explicativos: planetas en órbita, líneas de tiempo, gráficos que crecen, principios de funcionamiento en bucle.

No es la herramienta adecuada para: simulaciones o juegos basados en JavaScript (física con valores en vivo, applets interactivos); para logos e ilustraciones estáticas usa el generador SVG de GPT Image 2; para diagramas de flujo, el generador de diagramas SVG con IA.

Sí: literalmente, así funciona esta página por defecto. Claude Sonnet 5, de Anthropic, escribe directamente el marcado SVG y los keyframes CSS, forma a forma y fotograma a fotograma. Escribir código vectorial a partir de una descripción en texto es una de esas tareas en las que los modelos de última generación han mejorado de forma notable, y Claude está siempre entre los mejores. Aun así, no es la única opción: el selector de nivel también ejecuta Gemini 3.6 Flash y Kimi K3, y los ajustes avanzados permiten indicar directamente GPT-5.6, DeepSeek V4 Flash o MiniMax M3. Escribe una frase arriba y abre la vista de código para ver exactamente qué escribió tu motor.

Para cualquier cosa que vaya en una web, el SVG animado gana en todos los frentes: unas pocas decenas de kilobytes en lugar de megabytes, nitidez perfecta a cualquier nivel de zoom, bucle fluido e infinito y código editable en vez de píxeles fijados. El GIF conserva una sola ventaja: se reproduce en plataformas que no aceptan subir SVG (algunas apps de mensajería y redes). Regla práctica: SVG para tu propia web, tus diapositivas y tus documentos; GIF solo donde la plataforma te obligue. No hace falta decidirlo de antemano: cada generación se exporta a GIF y MP4 desde el mismo resultado, renderizado en tu navegador y sin coste adicional en créditos.

De dos formas:
(1) Como imagen: sube el .svg y enlázalo en una etiqueta img normal. Las animaciones de keyframes CSS que hay dentro del archivo se reproducen solas.
(2) En línea: copia el código desde la vista de código y pégalo en tu HTML. Esta es la vía si quieres efectos al pasar el ratón, ya que los estados de interacción solo funcionan cuando el SVG vive dentro de la página.
En ambos casos no hay ningún script que cargar ni nada que instalar.

No. La salida es animación puramente declarativa: keyframes CSS (y ocasionalmente SMIL) dentro del propio archivo SVG. Sin GSAP, sin reproductor de Lottie, sin capa de ejecución. Eso es justo lo que la hace segura de incrustar en línea, rápida de cargar y compatible con todos los navegadores modernos. Una salvedad honesta: la mayoría de los clientes de correo congelan las animaciones SVG, así que para newsletters el GIF sigue siendo la opción más segura.

Sí, ese es el segundo modo. Sube tu SVG, describe el movimiento que quieres (dibujar el contorno trazo a trazo, flotar suavemente, hacer latir el color de acento) y la IA añade la animación conservando intactas tus formas originales. Si tu logo solo existe como PNG o JPG, conviértelo primero con el generador SVG de GPT Image 2 y anímalo aquí después.

Sí, y ambos son gratis. El SVG es el resultado nativo; el GIF y el MP4 se producen reproduciendo tu animación fotograma a fotograma dentro de tu navegador: no se sube nada y no se cobran créditos adicionales. Usa GIF donde no acepten SVG y MP4 para vídeo corto, diapositivas y material de curso. La codificación de MP4 necesita un navegador con WebCodecs (Chrome, Edge y las versiones recientes de Safari lo tienen); si falta, el SVG y el GIF siguen funcionando y solo el botón de MP4 queda desactivado.

10 créditos por generación, igual que las demás herramientas SVG de este sitio. Los usuarios nuevos reciben créditos gratis para probarlo.

La mayoría de las animaciones están listas en bastante menos de un minuto. Las escenas con muchos elementos o coreografías largas pueden llegar a dos minutos: la IA escribe a mano cada forma y cada keyframe.

Sí. Las animaciones que generas son tuyas y su uso comercial es libre: en proyectos de clientes, dentro de productos y en contenido de pago.

Da vida a tu primer vector

Entra una frase, sale un SVG animado: nítido en cualquier tamaño y listo para incrustar donde quieras.

Crear una animación

¿Buscas otra herramienta?

Explora todos los generadores de imágenes con IA, modelos, conversores y herramientas de fotos en un solo lugar.

Ver todas las herramientas de imagen con IA