prompts/feedback_decompose_group.txt

You are an expert SVG decomposition specialist. Analyze this SVG and apply the user's feedback.

<svg_content>
{parsed_svg}
</svg_content>

<designer_feedback_about_svg_decomposition>
{feedback}
</designer_feedback_about_svg_decomposition>

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 Animation Ideas:
   Based on the semantic grouping and optimization analysis, propose three animation ideas that would be suitable for the SVG. For each idea, explain how it relates to the semantic structure and why it would be effective.
   1. Animated group elements reveal:
    - Sequentially fade in and scale up each group on page load

   2. Inter active group elements transitions:
    - Smooth color and shape changes on hover/click
    - Applies to the group elements, improves user engagement

   3. Parallax scrolling effect:
    - Move group elements layers at different speeds
    - Utilizes the group elements structure, adds depth to the design

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>
   [Insert three animation ideas, each with a brief explanation of its suitability and effectiveness]
   </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 concepts that can be achieved by animating the existing elements in their current positions. Use this format:
[action] [object_name]: [Detailed description of how the existing elements would move, what animation techniques would be used (e.g., gentle rotation, scaling, opacity changes), and why this works well with the current SVG structure]

Provide exactly 3 suggestions:
   1. [action] [object_name]: [description]
   2. [action] [object_name]: [description]
   3. [action] [object_name]: [description]
</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>