Decomate: Leveraging Generative Models for Co-Creative SVG Animation

AI summary

Overview

Research area: Human-Computer Interaction, specifically generative AI for creative tooling (SVG motion design and design workflows).

Technical level: Intermediate. The paper is a systems and user-study paper rather than a machine-learning methods paper; readers need only a general familiarity with SVG, CSS/JS animation, and multimodal large language models.

Scope: The paper describes Decomate, a prototype pipeline that restructures raw SVG graphics into semantically meaningful groups using a multimodal LLM and then generates HTML/CSS/JS animations from natural-language motion prompts, evaluated through interviews with 11 designers and a six-participant user study.

What This Paper Is About

Designers who want to animate static SVG graphics run into friction because existing tools assume SVGs are already organized into meaningful, labeled groups, or they require manual code editing and developer support. Decomate's goal is to let designers describe motion in plain language and have the system figure out the appropriate structural decomposition itself. The paper's aim is a co-creative workflow in which both the grouping of an SVG's parts and the animation applied to them can be iteratively refined through conversation rather than code.

Key Contributions

1. A semantic decomposition step for unstructured SVGs. Decomate uses a multimodal large language model (Claude Sonnet 4) to analyze both the SVG code and its rendered image, restructuring the graphic into "semantically meaningful, animation-ready components" regardless of whether the source file is well-structured or entirely flat, and regardless of whether it has class names or groupings.

2. A language-driven pipeline from SVG to production-ready animation code. Users specify motion per component through free-form natural-language prompts (the paper's example: "make the wings flap slowly with elastic easing"), and a text-based language model (also Claude Sonnet 4) translates the final group structure and prompts into production-ready HTML and CSS, with the system outputting a fully animated SVG plus the corresponding HTML/CSS/JS code.

3. Iterative refinement of both structure and motion. Users can correct groupings in natural language (the paper's example: "split the left and right feet") and refine animation behavior through further prompts (the paper's example: "increase the bounce on landing"), with each revision triggering regeneration of the animation code and preview.

4. A formative interview study and a user study. The authors ran formative interviews with 11 professional product and UX designers to identify pain points in motion design, then conducted a formative user study with six participants who animated an SVG with Decomate and gave qualitative feedback on intent alignment, SVG decomposition, and visual naturalness.

Main Findings

• Animation is deprioritized in practice. In the 11-designer formative interviews, animation was frequently deprioritized due to time constraints and rigid team schedules, even among designers who considered motion important for clarity and user engagement.

• Fine-tuning motion is tedious and developer-dependent. Participants described adjusting timing, easing, or expressive behaviors as tedious and overly dependent on developer implementation, reporting a disconnect between their creative vision and the final result.

• Interest in AI animation tools outpaces experience. All interview participants expressed interest in AI-assisted animation, but none had experience using such tools, largely because approachable, design-oriented solutions are absent and because they lacked familiarity or confidence in formulating effective prompts.

• Semantic decomposition was a strength. User study participants found the semantic decomposition generally effective, particularly for flat or unstructured SVGs, and appreciated that minimal effort was needed to produce animations and that groupings could be refined in natural language.

• Grouping errors produced misaligned motion. Reported failures include a "whale's eye detached," a whale's body, eye, and features moving separately when they should have been grouped, a "flying bird" where unrelated parts moved or detached, and a rocket whose parts "moved separately instead of cohesively."

• Prompt formulation was the most common difficulty. The most frequently cited challenge was specifying animations via natural language; participants were often unsure how to phrase prompts, and several found it hard to express fine-grained details such as subtle motion intensity or layer-level timing.

• Motion quality was mixed. Feedback includes motion that "felt rough," awkward transitions, timing inconsistency with some parts too fast or abrupt, and linear rather than swinging motion when a participant tried "whale fin moves left and right," alongside positive notes on droplet effects and physics-based easing.

• Interface and control limitations. Participants wanted clearer rules for what to separate (droplets) versus keep together (eyes, arms), found the "Decomposed Elements / Create Animation" panel layout confusing, and asked for direct UI controls (curve, duration, sliders) beyond text-only input.

• No quantitative results are reported. The paper presents qualitative feedback only; it reports no benchmarks, task-completion metrics, timing measurements, or comparative accuracy figures.

Methodology in Plain English

The authors first ran formative interviews with 11 professional product and UX designers to ground the design in real workflow problems. They then built Decomate as a pipeline with six stages. First, the user uploads an SVG file or pastes raw SVG code and supplies a high-level object name (their example is "dog") to guide grouping into parts like ears, nose, mouth, and legs. Second, a multimodal LLM looks at both the code and the rendered image and proposes semantically meaningful groups, along with preliminary natural-language animation suggestions for each group. Third, the user reviews the proposed groups in a visual preview and can correct them in natural language. Fourth, the user writes motion prompts, using the system's suggestions as a starting point. Fifth, a text-based LLM converts the final group structure and prompts into production-ready HTML/CSS/JS. Sixth, the animation renders in a live preview pane where the user inspects timing, easing, and spatial behavior and refines further, with every revision regenerating the code. To evaluate, the authors conducted a formative study in which six participants animated an SVG with the system and gave qualitative feedback on intent alignment, SVG decomposition, and visual naturalness.

Why This Matters

Impact on research. The paper contributes to the growing line of work on generative models in design workflows, and explicitly positions itself against prior systems: Kolthoff et al. (2024) on zero-shot prompting for high-fidelity GUI prototypes from natural language, Xing et al. (2024) on datasets for LLM SVG understanding and generation, and Keyframer (Tseng et al., 2024), which generates SVG animations from natural-language prompts but assumes well-structured assets with explicit class labels. Decomate's distinctive claim is that it targets the gap between unstructured design assets and expressive, user-driven motion — treating semantic restructuring as a first-class step rather than a precondition.

Real-world applications.

• Micro-interaction and UI motion design: generating looping or transitional animations for product interfaces from existing static SVG icon and illustration assets.
• Rapid prototyping of motion concepts: letting designers test several motion ideas on the same asset without writing CSS or JavaScript.
• Small loop animations and lightweight asset motion: one participant judged the approach "suitable for small loop animations."
• Design handoff and collaboration: producing readable HTML/CSS/JS that can be inspected and passed to developers, reducing the manual editing and multi-platform switching the paper identifies as a current bottleneck.

Industry relevance. The paper speaks directly to design tooling. Designers in the study used Figma, Lottie, After Effects, Aninix, and basic code, and the reported pain points — motion deprioritized by schedules, developer-dependent fine-tuning, no accessible AI animation tools — are structural to product design teams. Because Decomate outputs production-ready HTML/CSS/JS rather than a proprietary format, it fits web-oriented workflows, and the authors provide a public live demo and sample animation GIFs on Hugging Face Spaces.

Future Directions

1. Reduce the prompt-authoring learning curve. Provide prompt examples and templates, as the authors state, to lower the barrier that study participants identified as the most common challenge.

2. Predict intent from partial input. Implement an LLM-driven suggestion feature that infers user intent from incomplete prompts and recommends complete prompt candidates.

3. Add structured animation controls. Incorporate sliders and toggles for precise tuning of behaviors such as timing, easing, or direction, addressing requests for finer-grained control over motion intensity and layer-level timing.

4. Improve grouping rules and reflect intent more accurately. The authors plan to enhance Decomate's ability to reflect users' creative intent, and participant feedback identifies a concrete open question: how to decide what should be separated (droplets) versus kept together (eyes, arms), and how to prevent erroneous grouping such as detached whale eyes or a rocket whose parts move independently. They also plan a wider range of motion styles beyond the current set.

Target Audience

This paper benefits HCI and creative-AI researchers studying generative models in design workflows; interaction designers and design-tool builders interested in natural-language animation authoring; front-end and motion developers who need to understand how LLM-generated SVG animation code performs in practice; and practitioners evaluating whether current generative tools can handle unstructured, real-world graphic assets rather than cleanly labeled ones. Readers looking for quantitative evaluation or benchmark comparisons will not find them here — the evidence is qualitative.

Authors’ abstract

Designers often encounter friction when animating static SVG graphics, especially when the visual structure does not match the desired level of motion detail. Existing tools typically depend on predefined groupings or require technical expertise, which limits designers' ability to experiment and iterate independently. We present Decomate, a system that enables intuitive SVG animation through natural language. Decomate leverages a multimodal large language model to restructure raw SVGs into semantically meaningful, animation-ready components. Designers can then specify motions for each component via text prompts, after which the system generates corresponding HTML/CSS/JS animations. By supporting iterative refinement through natural language interaction, Decomate integrates generative AI into creative workflows, allowing animation outcomes to be directly shaped by user intent.