Por qué la animación basada en código vence a los GIFs de nuevo

El impulso de Google para 2026 hacia visuales nativos de código no se trata de eliminar a los diseñadores, sino de enviar activos tiny e de resolución infinita directamente desde un prompt. Los modelos de clase Gemini 3.1 pueden generar markup SVG válido con animaciones CSS o SMIL incrustadas. Como el resultado es matemática, no píxeles, un solo archivo escala desde iconos móviles hasta secciones hero sin necesidad de reexportar.

Este tutorial te guía a través de tres proyectos escalables en MidassAI Chat: sin cronología de Figma, sin After Effects, sin IDE local requerido hasta que pegues el fragmento final.

A quién va dirigido este tutorial

Desarrolladores frontend prototipando micro-interacciones
Marketers que necesitan loaders e iconos ligeros para landing pages
Educadores creando diagramas interactivos (física, química, flujos de proceso)
Cualquier persona cansada de loaders GIF de 2 MB en sitios otherwise rápidos

Prueba Gemini 3 en MidassAI Chat

Antes del Prompt: Tres restricciones para evitar resultados inservibles

Incluye siempre esto en tu primer mensaje:

Formato de salida: "Return only raw SVG code, starting with <svg and ending with </svg>. No markdown fences."
Motor de animación: "Use CSS @keyframes inside a <style> block within the SVG" (o "use <animateTransform>" si necesitas embeds solo SMIL).
Viewport: "viewBox=0 0 100 100", width/height=100%, preserveAspectRatio=xMidYMid meet."

Sin el #1, lucharás con wrappers de markdown en editores CMS. Sin el #2, el modelo a veces elige APIs de animación inconsistentes. Sin el #3, los diseños responsive se rompen en móvil.

Proyecto 1: Spinner de carga de tres puntos (Principiante)

Abre MidassAI Chat y envía:

Write a single self-contained SVG loading indicator: three circles in a row, staggered bounce animation, 1.2s loop, colors #4F46E5 / #6366F1 / #818CF8. Output only raw SVG. Include CSS keyframes inside the SVG. viewBox 0 0 120 40.

Valida en 60 segundos:

Copia la salida en un archivo .html en blanco dentro de <body>.
Abre en Chrome: la animación debería buclear suavemente.
Inspecciona el tamaño del archivo: espera menos de 3 KB.

Solución común: Si los círculos se cortan arriba, responde: "Increase viewBox height by 20% and reduce bounce amplitude by 15%."

Proyecto 2: Estado hover interactivo de botón (Intermedio)

Objetivo: Icono SVG que transforma el color del stroke al hover: puro CSS, sin JavaScript.

Plantilla de prompt:

Create an SVG icon (24×24 logical size, scalable) of a chat bubble. On :hover via CSS inside the SVG, transition stroke from #64748B to #2563EB over 200ms ease-out. Include role="img" and <title>Chat</title>. Output raw SVG only.

Pega en el slot de iconos de tu sitio o inline en HTML. Como el hover es driven por CSS, funciona en páginas estáticas y la mayoría de bloques HTML de CMS.

Error común: Algunos sanitizers eliminan etiquetas <style>. Si tu CMS elimina estilos, pide a Gemini que "move animation to inline style attributes on each element" en un follow-up.

Proyecto 3: Simulación educativa con disparador (Avanzado)

Inspirado en educadores de química y física que usan Gemini para diagramas interactivos, construye una simulación en un solo archivo:

Generate a single-file interactive SVG illustrating a simple state machine: Idle → Loading → Success. Include a <button> inside <foreignObject> labeled "Run". On click, animate a progress arc from 0° to 360° over 2s, then show a green checkmark. Use CSS classes toggled via minimal inline JS inside <script> within SVG (CDATA wrapped). Output only the SVG document.

Lista de verificación de pruebas:

El clic del botón se dispara exactamente una vez por ciclo
La animación se resetea limpiamente en el segundo clic
Sin assets externos o fuentes

Si <foreignObject> falla en tu plataforma objetivo, pide a Gemini que "replace foreignObject button with an <a> trigger using href='#run' and :target CSS pseudo-class."

Bucle de iteración: Cómo refinan los pros sin empezar de cero

Trata cada respuesta como una versión, no como algo desechable:

Pega el SVG actual.
Describe un cambio visual ("slower easing", "flat design, no gradients").
Pregunta: "Return full updated SVG; preserve viewBox and accessibility title."

Gemini 3 maneja bien las ediciones espaciales cuando anclas coordenadas ("move the center dot from (50,50) to (50,45)").

Gemini 3.1 vs Modelos anteriores en tareas SVG

Los modelos anteriores a menudo:

Emiten XML roto (paths sin cerrar)
Mezclan namespaces HTML y SVG incorrectamente
Animan con SMIL deprecated sin fallbacks

Las salidas de clase Gemini 3.1 típicamente renderizan al primer intento en un navegador moderno para tareas de loader e iconos: aún siempre valida en tu contexto de embed (WordPress, Notion, clientes de email eliminan scripts agresivamente).

comparison-table {"headers":["Output type","File size vs GIF","Scales to 4K?","Editable?"],"rows":[["Animated GIF","Large (100KB–2MB)","No (pixel blur)","No"],["Gemini SVG + CSS","Often <10KB","Yes","Yes — text edit"]]}}

Checklist de producción antes de publicar

Pasa la salida por W3C SVG validator o equivalente
Prueba en Safari + Chrome (el timing de animación CSS difiere ligeramente)
Confirma que el CMS no elimina <style> / <script>
Añade media query prefers-reduced-motion: pide a Gemini que genere esto en un follow-up
Atribuye assets asistidos por AI según la política de tu organización

Cuándo no usar este flujo de trabajo

Omite la animación SVG generada por AI cuando:

Las guías de marca requieren componentes de design-system bloqueados
Necesitas integración Lottie con curvas de easing complejas ya en Figma
El entorno objetivo es email (el soporte SVG es inconsistente)

Para sitios de marketing, portales de docs y herramientas internas, prompt-to-SVG sigue siendo una de las rutas más rápidas de la idea al embed.

Siguiente paso

Ejecuta el Proyecto 1 en vivo, pega el spinner en tu página de staging, luego itera sobre los colores de marca. MidassAI Chat te da generación de código de clase Gemini 3 en el navegador: sin configuración de proyecto en AI Studio requerida.

summary-box {"title":"Tutorial recap","rows":[["Tool","MidassAI Chat + Gemini 3"],["Output","Self-contained animated SVG"],["Key prompt rule","Raw SVG only, CSS keyframes inside"],["Validate","Browser + file size under 10KB"]]}}

SVG Animados en Minutos: Tutorial con Gemini 3.1