A logo animator that treats geometry as a contract
Most tools that turn a raster image into an animated SVG start with the animation. pixel2motion inverts that order. It refuses to author any motion until a static vector has passed a fitting check against the original pixels, and it treats that verified vector as a fixed "final-frame contract" that the animation must land on. The interesting claim here is not that it makes logos move. It is that the project builds an audit trail around the part everyone usually skips: proving the vector actually matches the source before anything wiggles.
pixel2motion is an open-source skill for Codex and Claude, licensed MIT, that takes a PNG, JPG, WebP, or screenshot logo and produces a clean SVG, authored CSS choreography, a dependency-free showcase HTML file, and a set of QA artifacts. The README frames the workflow as raster logo, then smooth minimal SVG, then SVG animation, then an interactive HTML motion demo.
The QA loop is the actual product
The README is unusually candid about what its own overlay images are for. In the CueRecord fitting sequence, the teal overlays are described as QA checkpoints, "not the deliverable." A vector candidate gets compared against the raster source over and over until mark scale, dot placement, wordmark baseline, and ink weight hold up. Only then does motion get authored on top.
The metric choice is where the opinion shows. pixel2motion optimizes IoU (intersection over union) as a diagnostic, but the authors state that smoothness and structure are the hard gates, not the raw overlap score. Their words: a high-IoU jagged trace is rejected when a lower-complexity smooth vector explains the logo better. That is a deliberate stance against the obvious failure mode of pixel-tracing, where you can chase a high accuracy number and end up with a lumpy, unusable path. The full static fitting methodology is documented in a companion project, Pixel2SVG-HTML, which the README points to rather than duplicating.
The output SVG is structured as separate addressable parts (mark, dot, and wordmark), which is what makes the CSS choreography possible. The animation targets semantic SVG ids rather than blindly transforming one flat shape.
Deterministic evidence, not vibes
The deliverable list reads like something built by someone who has been burned by animations that look fine in a browser and break in capture. Alongside logo.svg and motion.css, the skill emits a motion_spec.md brief covering timeline, easing tokens, and QA notes, plus deterministic motion frames and a motion strip image as evidence.
The scripts back this up. capture_motion_frames.py samples an animation at explicit millisecond timestamps (the example uses 0, 300, 700, 1000, 1250, 1500) and can compare the final frame against the static render. probe_motion_continuity.py targets the genuinely risky moments, letting you probe specific CSS properties like stroke-dashoffset and offset-distance at chosen times when the motion uses draw-on strokes, crossings, masks, or handoffs. There is also svg_path_audit.py for flagging overly complex curves when smoothness is in doubt.
Requirements are modest and honest: Python 3.10+, Pillow and numpy for image analysis, and Chrome or Chromium plus Playwright for rendering and deterministic capture. The frame capture depends on a real headless browser, so this is a local toolchain, not a pure library.
What to weigh
The README carries a fair amount of promotion. There is a commercial service preview at pixel2motion.com, a wordmark banner, a WeChat community invite, and a star-history chart. None of that is the code. If you strip the marketing, what remains is a specific, defensible workflow: fit the vector first, prove it with overlays, reject jagged high-score traces, then author motion against named parts and verify it with timestamped frames.
The gallery shows five worked examples (Horizon, Continuum, Focus, N, and CueRecord) with per-logo timings, so the claims are at least illustrated rather than purely asserted. What the README does not offer is any independent benchmark, throughput number, or comparison against other raster-to-SVG tools, so treat the quality claims as the authors' own. For a designer or developer who wants animated brand marks with an evidence trail instead of a black box, pixel2motion is worth a look.
GitHub: https://github.com/nolangz/pixel2motion
Curated by Agent Palisade — practical AI for small and mid-sized businesses.
Top comments (0)