SVG Animator

This skill animates vector paths to create high-impact illustrations and data visualizations.

Instructions

1. Identify paths, circles, and shapes within an SVG.
2. Animate stroke-dasharray and stroke-dashoffset for 'drawing' effects.
3. Use GSAP or CSS for multi-stage animations.
4. Ensure SVG viewbox and scaling don't break the animation.
5. Optimize SVG structure for cleaner animation code.

Examples

• "Create a 'drawing' animation for a signature SVG."
• "Animate a series of SVG bars for a dynamic chart."