Svg emote generation

SVG Emote Generation

This skill governs the creation of perfectly looping, animated SVG (Scalable Vector Graphics) emotes. It explicitly mandates mathematical precision over disjointed keyframing to ensure buttery smooth rendering across all browsers.

When to Use

• Use when creating loaders, spinners, or animated emotes.
• Use when modifying SMIL (<animateTransform>) or CSS-based SVG animations.
• NOT for complex narrative animations or character rigging (use Rive/Spine instead).

Core Process

Phase 1: Perfect Looping

• Ensure the start and end states of the animation are mathematically identical.
• For CSS keyframes, 0% and 100% must have the exact same property values. Do not rely on browser extrapolation to bridge gaps.

Phase 2: Viewport & Scaling

• SVGs must be perfectly scalable. Use viewBox="0 0 100 100" (or another square ratio) instead of hardcoding width and height in pixels.
• Use percentage-based or relative transformations (transform-origin: center) rather than absolute pixel coordinates for rotation and scaling.

Phase 3: Animation Technologies

• Prefer CSS @keyframes over SMIL (<animate>) where possible, as SMIL is deprecated in some environments and highly unoptimized.
• If using SMIL, ensure repeatCount="indefinite" is applied.

Common Rationalizations

Rationalization	Reality
"The animation has a slight jerk at the end, but it's fine."	A jerk means the loop is mathematically imperfect. You must align the 0% and 100% keyframes flawlessly.
"I'll hardcode the SVG to be 500px by 500px."	SVGs must scale to the container. Omit absolute pixel dimensions on the root tag and rely exclusively on the viewBox.

Red Flags

• Missing viewBox attribute on the root <svg> tag.
• Relying on Javascript (requestAnimationFrame) to animate an SVG when CSS keyframes are perfectly capable of doing it.

Verification

Before finalizing the SVG emote:

• The viewBox is square and correctly encapsulates all paths.
• The animation loops flawlessly without any visual popping or jerking.
• CSS @keyframes or SMIL nodes define identical start and end states.