with-svg-animation
Installation
SKILL.md
with-svg-animation
You already know how to animate SVG. What you reliably fail to do is raise these conditions when the user hasn't named them — a vague request produces a plausible answer that breaks on the user's actual artwork. This body is a pre-flight, not a tutorial.
Pre-flight — answer before writing any code
Read the actual path data; if you can't see it, ask for it. Never answer from the request alone — every trap below is invisible in the request and obvious in the markup.
- Is the thing being animated the root
<svg>, or an element inside it? Inner elements needtransform-box. - Does the target
dcontain more than oneMcommand? One<path>can hold several disconnected subpaths. - Is the artwork stroked or filled? A draw-on animation only animates a stroke; a filled logo needs stroke-then-crossfade, or a mask wipe instead.
- How many elements animate at once, and is it scroll-linked? Dash and
dare paint-level, not compositable — dozens of them on a mid-range phone is a different problem than one logo, and answering "many" or "scroll-linked" puts you under the paint budget in the last NEVER before you write anything.