Skip to content
Bud's Wiki

Vector Prism: Animating Vector Graphics by Stratifying Semantic Structure

TL;DR

Section titled “TL;DR”

Vector Prism takes a static SVG illustration and produces a CSS/HTML animation of it by stratifying the SVG into semantically meaningful groups, planning per-group motion with an LLM/VLM, and emitting a final animated HTML/CSS document. The pipeline is structurally three steps — semantic parsing of the SVG element tree, plan generation, and code generation — with no end-to-end training: the heavy lifting is done by general-purpose multimodal models prompted in a fixed orchestration. The result is a training-free, fully open-source path from static vector art to animation that bypasses both video diffusion (which can’t preserve the editable vector structure) and per-script handcrafting (which doesn’t scale).

Key claims

Section titled “Key claims”
  • Static-SVG → CSS/HTML animation can be produced training-free by orchestrating LLM/VLM planning over a semantically stratified element tree, without per-asset optimization or video generation [project page; repo main.py / animation_planner.py].
  • Decomposing the SVG into semantic groups before planning is load-bearing; the planner reasons over groups, not raw <path> elements [repo svg_decomposition.py → animation_planner.py data flow].
  • CSS/HTML is a suitable target representation for the generator: it preserves the original vector structure (so the output is still editable, scalable, and renderable in any browser) and lets per-frame export run through headless Chrome [repo utils/export_frames.py, --fps 24 --duration 5].
  • The pipeline is reproducible from public components: paper, project page, code, and per-frame PDF/PNG export utilities are all released [repo README; CVPR 2026 Highlight badge on README].

Method

Section titled “Method”

Three stages, each implemented as a separate module in the official repo and chained by main.py:

  1. SVG decomposition / semantic parsing (svg_decomposition.py, svg_composition.py): parse the input SVG element tree, tag elements with semantic roles, and re-group <path> elements into higher-level “things that should animate together.” This is the stratification in the title — instead of treating the SVG as a flat list of paths, the pipeline imposes a hierarchy that the planner can reason over.
  2. Animation planning (animation_planner.py): an LLM/VLM is prompted with the stratified structure (and presumably a rendering of the source SVG) to produce a per-group motion plan — what moves, when, and how. Plans are persisted to a JSONL log (--test_plan_json logs/plans.jsonl), so planning and generation can be re-run or audited independently.
  3. CSS/HTML generation (animation_generator.py): a code-generation model translates the plan into a CSS keyframe animation embedded in an HTML document that wraps the original SVG. The output is rendered by any browser; for evaluation, utils/export_frames.py drives headless Chrome to dump per-frame PDFs or PNGs at a configurable fps and duration.

The full body of the arxiv submission was not fetchable at filing time (ar5iv/PDF returned empty); the method description above is reconstructed from the project page title (“Stratifying Semantic Structure”), the repo’s stated pipeline (“SVG input → semantic parsing → LLM/VLM-driven planning → CSS/HTML generation”), and the module decomposition in main.py.

Results

Section titled “Results”

The arxiv body was unavailable at filing time; quantitative results (any benchmarks, baselines, user studies) are not captured here. The artifact-level facts that are verifiable:

  • Accepted to CVPR 2026 as a Highlight [repo README badge].
  • Open-source reference implementation runs the published pipeline end-to-end from svg/test.jsonl with a single main.py invocation [repo Quick start].
  • Per-frame export utility produces PDF or PNG sequences at arbitrary fps/duration for downstream evaluation or video assembly [repo utils/export_frames.py].

A refresh once the full PDF body is reachable would pin down: (a) the specific LLM/VLM used for planning, (b) which model emits the CSS, (c) the evaluation suite and any baselines, (d) failure modes and ablations on the semantic stratification step.

Why it’s interesting

Section titled “Why it’s interesting”

Two things stand out. First, the output representation choice: CSS/HTML preserves the vector structure of the input, which is the entire reason for using an SVG source in the first place. This contrasts directly with VecGlypher: Unified Vector Glyph Generation with Language Models, the other CVPR 2026 SVG paper this wiki has on file — VecGlypher emits raw SVG <path> strings from an autoregressive LLM, putting the geometry fully under model control; Vector Prism does the opposite, keeping the original paths intact and using the LLM only to drive an animation layer expressed as CSS. Together they bracket the design space for “LLMs that produce graphical programs”: fully-emit-geometry vs. orchestrate-existing-geometry.

Second, the orchestration-only structure connects to the broader pattern in this week’s filings of using a pretrained generative or perception model as a training-free engine for a structured downstream task — see OmnimatteZero: Fast Training-free Omnimatte with Pre-trained Video Diffusion Models and VideoMaMa: Mask-Guided Video Matting via Generative Prior for the video-diffusion analogue. Vector Prism shows the same pattern works for symbolic outputs (CSS/HTML) when the source representation already carries the structure the task needs.

See also

Section titled “See also”