tracing-video-to-animated-svglisted
Install: claude install-skill ahnafnafee/tracing-video-to-animated-svg
# Tracing video into an animated SVG
## Overview
Measure, never eyeball. Build one clean, upscaled reference image of the subject from the footage,
read every coordinate, color, and cycle off it with tools, and generate the SVG from a script whose
numbers came from those measurements. Then judge the result the way visitors see it: animated, at
the page's display size, inside the real layout.
A drawing made from memory of the footage reads as a cartoon, and a raster frame sequence is blurry
and heavy. Both get rejected.
## When to use
- Recreating footage "1:1" as SVG: shapes, proportions, colors, and motion must match.
- The subject moves rigidly across the frame (a pan or a flyby) with parts that move on the body.
- Not for: stylized or new illustration (there is nothing to measure), or a static logo (trace one
frame instead).
## Pipeline
Tools live in `scripts/`; run each with `python <this skill>/scripts/NAME.py --help`. Needs Python 3
with opencv-python, numpy, scipy, playwright (with Chrome), and ffmpeg. All coordinates are SVG
units: source pixels times the scale (4), measured from the reconstruction window's top-left.
1. **Source.** Get the highest-quality file. Hosted sites often list variants (a Wix page's
`qualities` array, `srcset`, HLS renditions); take the largest.
2. **Reference.** `stack_reference.py VIDEO --out WORK --template X0,Y0,X1,Y1 --ref-frame N`
tracks a rigid, textured patch (frame and torso, never limbs or props), fits the motion, and