1 · Stroke drawing
El logo se traza en 3s con stroke-dashoffset animado vía CSS keyframes + pathLength="100" para normalizar.
2 · Loader circular
SVG inline con <animateTransform> SMIL rotando el círculo indefinidamente. Funciona aunque el SVG esté en <img>.
3 · Shape morphing
Click en el botón: las 3 líneas de la hamburguesa se convierten en una X con transform CSS (GPU). Pulsa de nuevo para revertir.
4 · Motion path
Un círculo sigue un path Bézier usando <animateMotion> + <mpath>. El trail guía es solo visualización.
5 · Microinteracción hover
Al pasar el ratón, el corazón late con CSS @keyframes sobre transform: scale(). GPU-compositing, sin repaint.
Extra · Check animado
Secuencia: círculo se dibuja (0.6s), luego check aparece (begin="0.5s"). SMIL encadenado con fill="freeze".