such-skillsrajnandan1animate-svg
animate-svg
Hand-crafted SVG animation with zero dependencies. From a checkmark that draws itself to layered scenes with particles and parallax, in whichever technique survives where the file will live.
Describe the motion; get a single self-contained file.
Like this
The such-skills mark, drawing itself. Made the way the skill makes everything: one file, no libraries.
The right technique for the destination
Where the SVG will live decides what can run. The skill picks accordingly instead of shipping something that dies in a README.
| Where it lives | What it uses |
|---|---|
| Inline in HTML or JSX | CSS keyframes; JavaScript only when state demands it. |
| <img>, CSS background, favicon, GitHub README | CSS inside the file for simple loops; SMIL for chained, timed sequences. No JS runs there. |
| Needs hover or click | Inline SVG with CSS :hover or SMIL begin="click". |
What it makes
Self-drawing paths and signatures, loading spinners, morphing shapes, motion along a path, animated gradients, waves and pulses, animated logos and badges — up to layered scenes with choreographed build-ins, particle fields, and parallax. Reduced motion is honored in every file it ships.
Use
# the classic
/rajnandan1:animate-svg a checkmark that draws itself
# for a README
animate my logo.svg so it works on GitHub
# something bigger
a night-sky hero scene with drifting particles
Install
One plugin carries all seven skills. Two commands and this one is ready.