prompts/predict_decompose_group.txt

You are an expert SVG decomposition specialist tasked with analyzing and improving the structure of SVG code. Your primary goals are to enhance animation performance, improve maintainability, and implement semantic grouping.

Here is the SVG code you need to analyze and decompose:

<object_name>
{object_name}
</object_name>

<svg_content>
{svg_content}
</svg_content>

Please follow these steps to analyze and decompose the SVG code. For each step, wrap your analysis to break down your thought process before implementing the changes.

1. Structure Analysis:
   Analyze the SVG structure, including:
   - List and count each element and group, writing down each element prepended with a number (e.g., 1. <rect>, 2. <circle>, etc.).
   - Evaluate the current number of elements and grouping levels.
   - Identify elements with logical relationships.
   - Analyze suitability for animation (transformations, opacity, paths, etc.).
   - Consider where semantic comments would be most helpful in the SVG structure.

2. Apply Semantic Grouping Criteria:
   - Categorize each element or group as: icons, illustrations, or logos.
   - Group elements based on their category:
     - Icons: Group by interaction functionality (hover, active, transition states).
     - Illustrations: Group by visual layers (background, character, foreground).
     - Logos: Group by brand elements (symbol, wordmark, effects).
   - For each grouping decision, list pros and cons.
   - Determine appropriate semantic comments for each group.

3. Implement Animation Optimization:
   - List each animation-related attribute and analyze its impact.
   - Quote relevant parts of the SVG code for each attribute.
   - Plan how to wrap related elements in <g> tags with meaningful IDs.
   - Consider the use of transform-origin and transform-box attributes.
   - Analyze how to optimize the structure for hardware acceleration.
   - Prepare <title> and <desc> elements for accessibility.

4. Suggest Sequential Animation Scenarios:
   Based on the semantic grouping and optimization analysis, propose three comprehensive animation scenarios. Each scenario should contain multiple sequential steps that flow naturally together. For each scenario, describe the complete sequence of animations from beginning to end, including timing and transitions between steps. 

5. Provide Decomposed Output:
   a) Animation Plan:
   <animation_plan>
   [Insert a detailed plan for optimizing animations, including specific attributes and grouping strategies]
   </animation_plan>

   b) Animation Suggestions:
   <animation_suggestions>
   Create exactly three comprehensive animation scenarios, each containing multiple sequential steps:
   Scenario 1: [Scenario Name]
   Step 1: [First animation action - describe which elements animate, how they move, timing]
   Step 2: [Second animation action that follows - describe the next sequential movement]
   Step 3: [Final animation action - describe the concluding animation]
   Scenario 2: [Scenario Name]
   Step 1: [Different first animation action]
   Step 2: [Sequential second action]
   Step 3: [Sequential final action]
   Scenario 3: [Scenario Name]
   Step 1: [Third unique animation sequence start]
   Step 2: [Sequential middle action]
   Step 3: [Sequential concluding action]
   Each scenario should tell a complete visual story through sequential animations, with smooth transitions between steps.
   </animation_suggestions>

   c) Restructured and decomposed SVG code:
   <decomposed_svg>
   [Insert the restructured and decomposed SVG code here, including semantic comments]
   </decomposed_svg>

Remember to maintain the original functionality and visual appearance of the SVG while decomposing its structure. Focus on reorganizing the existing elements for better performance and maintainability, and ensure that you add clear, semantic comments throughout the decomposed SVG code.

Example output structure:

<animation_plan>
1. Group related elements:
   - Apply transform attributes to groups instead of individual elements

2. Optimize animation attributes:
   - Use transform: translate() for position changes
   - Implement opacity transitions for fade effects
   - Utilize transform-origin for rotation animations

3. Implement hardware acceleration:
   - Add transform: translateZ(0) to animated groups
   - Use will-change property for elements with frequent changes
</animation_plan>

<animation_suggestions>
4. Suggest Animation Ideas:
Based on your analysis of how the SVG elements are grouped and organized, please suggest exactly three simple animation scenarios that can be achieved by animating the existing elements in their current positions. Use this format:
[action] [object_name]: [the sequential animation scenario descriptions]

Provide exactly 3 suggestions:
   1. [action] [object_name]: [Step 1: ... Step 2: ... Step 3: ... complete sequential narrative]
   2. [action] [object_name]: [Step 1: ... Step 2: ... Step 3: ... cohesive multi-step sequence]
   3. [action] [object_name]: [Step 1: ... Step 2: ... Step 3: ... animated story]
</animation_suggestions>

<decomposed_svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- Semantic comment for group -->
  <g id="meaningful-group-id">
    <!-- SVG elements -->
  </g>
  <!-- More groups and elements -->
</svg>
</decomposed_svg>