TLDR: Decomate is a new system that simplifies SVG animation for designers by using generative AI. It leverages a multimodal large language model to restructure static SVGs into animation-ready components based on semantic meaning. Designers can then use natural language prompts to specify motions, and the system generates the corresponding HTML/CSS/JS code. This allows for intuitive, iterative animation creation without technical expertise, addressing common pain points like time constraints and lack of control over fine-grained motion details. The system aims to integrate generative AI into creative workflows, making animation more accessible and user-driven.
Animating static SVG graphics has long been a challenging task for designers, often requiring technical expertise, manual code editing, or reliance on developers. This process can be rigid, time-consuming, and limit creative exploration. A new system called Decomate aims to change this by making SVG animation intuitive and accessible through natural language.
Decomate, developed by Jihyeon Park, Jiyoon Myung, Seone Shin, Jungki Son, and Joohyung Han, addresses the common frustrations designers face. Existing tools often depend on predefined groupings or demand specific technical skills, which can hinder a designer’s ability to experiment and iterate independently. Decomate tackles this by leveraging generative AI to streamline the animation workflow.
The core idea behind Decomate is to bridge the gap between unstructured design assets and expressive, user-driven motion. It uses a multimodal large language model (MLLM) to take raw SVG files and intelligently restructure them into semantically meaningful, animation-ready components. This means the system can understand the different parts of an SVG, like the ears, nose, or legs of a ‘dog’ graphic, even if they weren’t originally grouped in a logical way.
Once the SVG is decomposed, designers can then specify the desired motions for each component using simple text prompts. For example, a designer might type, “make the wings flap slowly with elastic easing.” The system then generates the corresponding HTML, CSS, and JavaScript code to bring that animation to life. This approach allows for iterative refinement, meaning designers can adjust and fine-tune animations through natural language interactions, directly shaping the outcome based on their creative intent.
Understanding the Designer’s Challenge
To truly understand the pain points, the Decomate team conducted interviews with 11 professional product and UX designers. Several consistent themes emerged from these discussions. Firstly, animation is frequently deprioritized due to tight schedules and time constraints, despite its importance for clarity and user engagement. Secondly, fine-tuning animations, such as adjusting timing or easing, was described as tedious and overly dependent on developers, leading to a disconnect between vision and final result. Lastly, while designers were interested in AI-assisted animation, they lacked experience with such tools, largely due to the absence of approachable, design-oriented solutions.
Decomate directly responds to these needs by minimizing technical barriers and maximizing expressive control, empowering designers to explore motion as a flexible design material.
How Decomate Works: A Step-by-Step Process
The Decomate system follows an interactive pipeline:
-
SVG Input: Designers start by uploading an SVG file or pasting raw SVG code. The system is designed to handle various inputs, from well-structured to entirely flat graphics, without requiring prior asset preparation. Users provide a high-level object name (e.g., “dog”) to guide the semantic grouping process.
-
Semantic Decomposition and Animation Suggestions: A multimodal large language model (specifically, Claude Sonnet 4) analyzes both the SVG code and its visual rendering. It restructures the SVG into meaningful groups, prioritizing visual interpretation. For each group, it also generates preliminary animation suggestions in natural language.
-
Preview and Structural Refinement: Designers review the proposed groupings in a visual preview. If the structure doesn’t align with their creative vision, they can provide natural language feedback (e.g., “split the left and right feet”). The system then iteratively revises the semantic grouping.
-
Prompt-Based Animation Authoring: Using the system’s suggestions as a starting point, users describe desired motion behaviors through free-form natural language prompts (e.g., “make the wings flap slowly with elastic easing”). This enables expressive animation authoring without needing technical syntax.
-
Code Generation and Rendering: A text-based language model (also Claude Sonnet 4) translates the final group structure and animation prompts into production-ready HTML and CSS. The system outputs a fully animated SVG along with the corresponding code.
-
Interactive Preview and Iteration: The animation is rendered in a live preview pane. Designers can inspect and refine the animation further through additional prompts (e.g., “increase the bounce on landing”). Each revision triggers a regeneration of the animation code and preview, enabling expressive iteration.
Also Read:
- Unraveling and Controlling Hidden Biases in Complex AI Image Generation
- Targeted Forgetting: A New Approach to Unlearning in Multimodal AI
User Feedback and Future Directions
A formative study with six participants evaluated Decomate’s usability and creative support. Participants generally found the semantic decomposition effective, especially for unstructured SVGs. They appreciated the minimal effort required to generate animations and the interactive refinement of groupings via natural language, which helped align the animation structure with their creative intent.
However, challenges were also identified. Participants sometimes struggled with phrasing prompts effectively and expressing fine-grained animation details, such as subtle motion intensity or layer-level timing. To address these, the Decomate team plans to provide prompt examples and templates, implement LLM-driven suggestions for prompt candidates, and incorporate structured animation controls (like sliders and toggles) for precise tuning of behaviors.
Decomate represents a significant step forward in co-creative design, allowing designers to focus on their creative vision rather than technical implementation. It reframes animation as a collaborative process between human intent and computational adaptability, leveraging large language models to shape visual motion. You can learn more about this innovative system in the research paper available at arXiv:2511.06297.
