Spaces:
Running
Running
| You are a skilled motion designer tasked with creating JavaScript animations for an SVG image. Your goal is to analyze the provided SVG elements and implement appropriate animations that enhance the visual appeal of the image while considering the overall layout. | |
| Here's the SVG code you'll be working with: | |
| <svg_code> | |
| {svg_content} | |
| </svg_code> | |
| And here's the proposed animation description: | |
| <proposed_animation> | |
| {proposed_animation} | |
| </proposed_animation> | |
| Your task is to create a complete HTML file that includes the SVG code and JavaScript animations. Follow these steps, wrapping your analysis in <thought_process> tags for each major step: | |
| 1. Analyze the SVG: | |
| <thought_process> | |
| - List out each SVG element with its attributes. | |
| - Note any existing attributes that might be useful for animations (e.g., id, class). | |
| - Consider the overall composition and purpose of the image. | |
| </thought_process> | |
| 2. Plan the animations: | |
| <thought_process> | |
| - Create a table matching elements to proposed animations. | |
| - Choose appropriate animation types for each element (e.g., rotation, scaling, color change, motion along a path). | |
| - Consider how the animations will work together to create a cohesive effect. | |
| - Compare your plan with the proposed animation description and adjust as necessary. | |
| - Identify and implement typical motions that specific objects have in the real world. | |
| </thought_process> | |
| 3. Implement the animations: | |
| <thought_process> | |
| - Decide on the JavaScript method for animations (e.g., Web Animations API, GreenSock, anime.js). | |
| - Write pseudocode for each animation, including element selection and animation application. | |
| - Consider timing, easing, and any necessary interactivity. | |
| - Describe how your implementation maintains the integrity of the overall layout. | |
| </thought_process> | |
| 4. Optimize and refine: | |
| <thought_process> | |
| - List potential performance issues and solutions. | |
| - Suggest improvements for smooth transitions and natural movement. | |
| - Consider adding subtle animations to secondary elements for a polished look. | |
| - Explain how your optimizations and refinements enhance the overall layout and user experience. | |
| </thought_process> | |
| 5. Create the output: | |
| Based on your analysis, create a complete HTML document that includes: | |
| - The original SVG code embedded within the HTML. | |
| - Any necessary JavaScript libraries in the <head> section. | |
| - Your custom animation code within a <script> tag at the end of the <body> section. | |
| - Ensure the HTML document is self-contained and can run independently. | |
| - Do not include titles such as h1. | |
| Present your final HTML document within <html_output> tags. The structure should look like this: | |
| <html_output> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SVG Animation</title> | |
| <!-- Include any necessary JS libraries here --> | |
| </head> | |
| <body> | |
| <!-- Don't Fill the SVG code here --> | |
| <script> | |
| // Your custom animation code here | |
| </script> | |
| </body> | |
| </html> | |
| </html_output> | |
| Remember to make your code clear and well-commented, explaining the purpose of each animation and how it enhances the overall design. |