Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

Decomate: Leveraging Generative Models for Co-Creative SVG Animation

Jihyeon Park, Jiyoon Myung, Seone Shin, Jungki Son, Joohyung Han

TL;DR

Decomate tackles the difficulty designers face in animating static SVGs by introducing a language-driven pipeline that semantically decomposes unstructured SVGs into animation-ready components using a multimodal LLM. The system allows designers to iteratively refine structure and motion through natural language prompts, ultimately generating production-ready HTML/CSS/JS code and live previews. Key contributions include the semantic decomposition of SVGs, prompt-based animation authoring, and an interactive co-creative loop that lowers technical barriers. The approach promises practical impact by empowering designers to directly shape motion intent without deep coding or asset preparation, validated by a formative user study highlighting usability and avenues for improvement.

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.

Decomate: Leveraging Generative Models for Co-Creative SVG Animation

TL;DR

Decomate tackles the difficulty designers face in animating static SVGs by introducing a language-driven pipeline that semantically decomposes unstructured SVGs into animation-ready components using a multimodal LLM. The system allows designers to iteratively refine structure and motion through natural language prompts, ultimately generating production-ready HTML/CSS/JS code and live previews. Key contributions include the semantic decomposition of SVGs, prompt-based animation authoring, and an interactive co-creative loop that lowers technical barriers. The approach promises practical impact by empowering designers to directly shape motion intent without deep coding or asset preparation, validated by a formative user study highlighting usability and avenues for improvement.

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.

Paper Structure

This paper contains 14 sections, 2 figures, 1 table.

Table of Contents

  1. Introduction
  2. Motivation
  3. Methodology
  4. SVG Input
  5. Semantic Decomposition and Animation Suggestions
  6. Preview and Structural Refinement
  7. Prompt-Based Animation Authoring
  8. Code Generation and Rendering
  9. Interactive Preview and Iteration
  10. User Study
  11. Positive Feedback
  12. Challenges and Improvement Directions
  13. Conclusion
  14. Formative Interview Participants

Figures (2)

  • Figure 1: Overview of the Decomate pipeline. Users provide an SVG file or code, which is semantically grouped by a multimodal LLM. Groupings can be refined via natural language. After selecting or describing desired motions, an LLM generates corresponding HTML/CSS/JS code and preview, enabling iterative co-creation.
  • Figure 2: Decomate user interface. The system enables designers to animate static SVGs through an interactive language-driven pipeline: (1) Users upload or paste SVG code. (2) A multimodal LLM analyzes the SVG and suggests semantic groupings and animation ideas. (3) Users can refine decomposed elements using natural language. (4) Animation behavior is described through prompts. (5) The system generates HTML/CSS/JS code with animation. (6) A live preview allows users to inspect results and iteratively refine motion.