# Pixel2Motion: Turning Raster Logos into Animated SVG with AI Agent Assistance > Pixel2Motion is an open-source Codex and Claude skill that converts PNG, JPG, or WebP logos into clean, structured SVG files and then authors CSS animation on top of the verified static vector. The result is a dependency-free animated HTML file, motion QA evidence, and optionally GIF or video previews, all produced through a scriptable workflow that an AI agent runs end to end. **nolangz/pixel2motion** — AI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence. - Repository: https://github.com/nolangz/pixel2motion - Website: https://nolangz.github.io/pixel2motion/ - Stars: 2,362 · Forks: 196 - Language: Python - License: MIT - Published: 2026-09-10 · Updated: 2026-09-10 · Language: en - Canonical page: https://hysenlabs.com/projects/nolangz-pixel2motion ## The Problem: Raster Logos Are Not Animation-Ready A raster logo in PNG or JPG format has no structure that an animation system can address. An SVG logo, if it is created correctly, can have its mark, letterforms, and individual path segments identified and animated independently. Pixel2Motion bridges the two: it traces a raster source into a clean, semantically structured SVG where each animatable element has its own id, and then it authors CSS transitions targeting those ids. The workflow is designed to be run by an AI agent using Codex or Claude Code. The SKILL.md file in the repository contains the agent-facing instructions. An `agents/openai.yaml` file provides the UI metadata and a kickoff prompt for the Codex skill ecosystem. Five demos are shown in the README: Horizon, Continuum, Focus, N, and CueRecord. Each pairing shows the raster source alongside the motion output, with timing values: Horizon at 1900 ms, Continuum at 2000 ms, Focus at 1700 ms, N at 2400 ms, and CueRecord at 0.65x the page-default custom timeline. These demonstrate the range of minimal, geometric logos the fitting workflow handles well. The companion skill Pixel2SVG-HTML, in a separate repository, documents the static fitting methodology in full. Pixel2Motion builds on top of it, adding the animation layer, the CSS choreography, and the motion capture QA steps that Pixel2SVG-HTML does not include. ## Deliverables from a Completed Run A completed Pixel2Motion run produces a defined set of files. The `logo.svg` file contains the final static vector, structured for motion with semantic ids. The `motion.css` file contains the authored CSS choreography targeting those ids. The `logo_motion.html` file is a dependency-free animated HTML demo with replay controls, slow-motion and speed controls, QA hooks, and atomic motion studies. In addition to the deliverables, the workflow generates QA evidence files. The `outputs/fit_iterations/*.png` sequence shows the geometry overlay evidence from each fitting iteration. The `motion_frames/*.png` files and the `motion_strip.png` file provide deterministic motion frame captures. The `final_render.png` and `html_render.png` files are static render checks confirming the SVG and HTML outputs look as intended. The `motion_spec.md` file records the motion brief, principles applied, animation timeline, easing tokens, and QA notes. This documentation travels with the project and is the artifact the README recommends for understanding how and why the animation was designed as it was. All of these outputs are produced by the Python scripts in the `scripts/` directory, which the agent invokes as part of the workflow. ## The Fitting and Animation Workflow The workflow follows a defined sequence. The agent reads SKILL.md and the reference files in `references/` before starting. It writes a motion brief in `motion_spec.md` covering the logo's personality, usage context, the part inventory, and a choreography sketch. The static vector fit and QA check uses the render overlay script: ```bash python3 scripts/render_overlay.py logo.svg source.png \ --out outputs/fit_iterations/01_overlay.png \ --render-out outputs/final_render.png \ --report outputs/fit_metrics.json ``` For complex curves, the path audit script checks smoothness: ```bash python3 scripts/svg_path_audit.py logo.svg \ --out-svg outputs/bezier_segments.svg \ --report outputs/bezier_audit.json ``` Once the static vector passes QA, the animated HTML demo is built from the verified SVG and the authored CSS: ```bash python3 scripts/animate_svg_showcase.py logo.svg \ --css motion.css \ --out logo_motion.html \ --title "Logo Motion" \ --duration-hint 1500 ``` Deterministic motion frames are captured with Playwright: ```bash python3 scripts/capture_motion_frames.py logo_motion.html \ --times 0,300,700,1000,1250,1500 \ --out outputs/motion_frames \ --strip outputs/motion_strip.png \ --compare-final outputs/final_render.png ``` A continuity probe script exists for animations that use draw-on effects, crossings, masks, or handoffs between elements. ## Quality Gates: IoU as a Diagnostic, Not the Hard Gate The fitting methodology uses Intersection over Union as a diagnostic metric. But the README is specific about what the hard gates actually are: smoothness and structural coherence. A vector that achieves a high IoU through a jagged trace is rejected in favor of a lower-complexity smooth vector that better represents the logo's design intent. This distinction matters for understanding what kind of logos Pixel2Motion handles well. Logos with clean geometric shapes, minimal ornamentation, and distinct separated elements are the appropriate input. The five demo logos in the README are all minimal, modern wordmark and icon combinations: a wordmark, an arc, a circle, a single letterform, and a compound mark. Logos with detailed photographic textures, fine gradients, or complex raster elements are not demonstrated in the README and the README does not claim support for them. The fitting process is iterative. The `fit_iterations/` folder accumulates overlay evidence from each pass. Teal overlays in the QA images mark checkpoints where mark scale, dot placement, wordmark baseline, and ink weight are verified against the raster source. Only after those checks pass does the agent proceed to motion authoring. The `scripts/svg_path_audit.py` script checks individual Bezier segments for smoothness and reports problem segments in a JSON report. A curve with too many control points, or with tangent discontinuities, can pass the IoU check while producing noticeably rough motion in the final animation. The audit step surfaces these before the CSS is authored. ## Requirements and Local Setup Pixel2Motion requires Python 3.10 or later. The image analysis helpers depend on Pillow and numpy. Playwright and Chrome or Chromium are needed for geometry rendering and deterministic frame capture. The recommended local setup is: ```bash python3 -m venv .venv .venv/bin/pip install pillow numpy playwright .venv/bin/python -m playwright install chromium ``` If Chrome is not on the default system path, the `CHROME_BIN` environment variable tells the render scripts where to find it: ```bash export CHROME_BIN="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" ``` Node.js and npm are not required for the core workflow. The repository does not ship a package.json. It is a Python-based skill that an agent drives through script invocations. The `agents/openai.yaml` file is the only non-Python configuration outside of the skill instructions themselves. The `references/` directory contains animation principles, motion personality descriptions, reveal patterns, an HTML delivery template, and fitting references that the agent reads during the workflow. These are the guidelines that shape how the agent authors motion, not just technical parameters. ## Limitations and When Not to Use It Pixel2Motion is a skill, not a standalone application. It requires a Codex or Claude Code agent runner to operate. A developer who does not use either of those environments cannot use the skill in the intended way, though the Python scripts can be invoked manually for the fitting and rendering steps. The `render_overlay.py` and `capture_motion_frames.py` scripts take well-defined command-line arguments and can be run outside an agent context for one-off checks. The last push to the repository was on 2026-08-21. The README mentions a commercial service at pixel2motion.com coming online with polished delivery and production support beyond the open-source skill, which suggests the open-source version is a research and demonstration tool rather than a production-ready service. The skill produces SVG animation using CSS, without JavaScript. Animations that require JavaScript interactivity, physics simulation, or frame-by-frame dynamic behavior are outside the scope of the CSS-based motion approach. CSS transitions work well for reveal animations, draw-on paths, and fade or scale sequences, but they do not support programmatic animation driven by runtime data. A comparison with dedicated vector animation tools: Adobe After Effects with the Bodymovin plugin exports Lottie JSON animations, which can be played in a browser via the lottie-player library. Lottie supports complex keyframed animations and expressions. Pixel2Motion produces a self-contained HTML file with inline CSS animation and no runtime dependencies. The trade-off is simplicity and portability against the expressiveness of a keyframe editor. Pixel2Motion is the wrong tool for logos with complex raster details that cannot be faithfully traced into clean SVG paths. If the geometric structure of a logo does not survive vector tracing, the motion layer will animate an approximation, not the original design. The QA evidence is designed to surface this, but the agent or a reviewer still needs to judge whether the result is acceptable. The MIT license permits use and modification without restriction, subject to the standard attribution clause. ## Conclusion Pixel2Motion is a fit for design and frontend developers who want an AI agent to handle the pixel-to-vector fitting and SVG animation authoring workflow, and who are comfortable reviewing the QA evidence outputs to judge whether the vector faithfully represents the source logo. It is not a general-purpose image-to-vector tool; the workflow is purpose-built for logo animation. The last push was on 2026-08-21, and a commercial service at pixel2motion.com is noted as coming online for polished production support beyond the open-source skill. ## FAQ ### What output files does Pixel2Motion produce from a logo? Pixel2Motion produces a structured SVG file, a CSS animation file, a dependency-free animated HTML demo, a motion specification document, geometry overlay evidence images, deterministic motion frame captures, and static render checks. ### Does Pixel2Motion require an AI agent to run, or can scripts be run manually? The primary design is for a Codex or Claude Code agent to drive the workflow using SKILL.md. The Python scripts in the scripts/ directory can be invoked manually, but the skill's reference files and step sequencing are written for agent use. ### What is the relationship between Pixel2Motion and Pixel2SVG-HTML? Pixel2SVG-HTML is a companion skill repository that documents the static pixel-to-vector fitting methodology in full. Pixel2Motion builds the animation layer on top of the verified static SVG that fitting produces. ## Sources - [Issues](https://github.com/nolangz/pixel2motion/issues) - [License: MIT](https://github.com/nolangz/pixel2motion/blob/main/LICENSE) - [nolangz/pixel2motion on GitHub](https://github.com/nolangz/pixel2motion) - [Project website](https://nolangz.github.io/pixel2motion/) - [README](https://github.com/nolangz/pixel2motion/blob/main/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/nolangz-pixel2motion