SVG Animation Guide

Helps you create smooth, performant SVG animations using CSS, SMIL, and JavaScript animation libraries.

Usage

Ask for help animating SVG elements, creating path animations, or building interactive illustrations.

Examples

• "Animate an SVG path drawing effect with CSS"
• "Create a morphing shape animation between two SVGs"
• "Build a loading spinner using SVG and GSAP"

Guidelines

• Prefer CSS animations for simple transitions over JavaScript
• Use will-change and transform for GPU-accelerated animations
• Keep SVG markup clean and optimized with tools like SVGO
• Test animations across browsers as SMIL support varies
• Provide reduced-motion alternatives for accessibility