animated-svg-iconslisted

# Animated SVG Icon System This skill guides you through building premium, high-performance, micro-interactive SVG icons. These icons respond to cursor hovers and scroll-based triggers using two distinct stages: 1. **Stage 1 (Hover On / Active)**: The forward animation plays. The icon may end in a different visual pose than it started. 2. **Stage 2 (Hover Off / Settle)**: The icon returns smoothly to its exact initial state, ensuring visual consistency when the interaction ends. ## Design Philosophy & Creative Motion High-fidelity icons should be expressive, engaging, and creative rather than just doing basic linear rotations or scales. Delightful motion design brings icons to life through: - **Expressive Movement & Physics**: Leverage physics-based easing curves like squash-and-stretch, gravity swings, secondary actions, and overshoot bounces. For example, a briefcase swinging slightly under gravity, or a gear spinning with an elastic overshoot. - **Storytelling & Interaction**: Introduce micro-details that emerge during interaction to surprise and engage the user. For example, a document sliding out of a briefcase, or a head sliding into a hard hat. - **Positional Swaps**: It is highly effective and visually engaging to have parts of the icon switch positions during hover, as seen in quote mark animations (where quotes swap places on an arc path) or code tag `<>` animations (where brackets slide past each other to swap sides). This creates a playful, interactive loop. -