Sonnet 3.5 Fun - SVG Animation

1 - Animating SVGs with Sonnet 3.5

I used sonnet 3.5 and Cursor to created a logo which animates on entry.

Input file: initial_logo.svg (below)

Prompt: 
```
Let's add a start up animation to this SVG

Make it feel like feel like the logo starts broken, then fixes itself piece by piece. In a playful style like pixar.
```

Output: animated_looped.svg (below). 

Notes:
 - I had zero prior experience with animating SVGs. My first prompt was "can you animate SVGs?".
 - I did a second edit with Sonnet to make the animation repeat for this gist, but the initial edit was correctly a 1-time intro animation.
 - It took 10x longer to format this gist then make the animation I wanted.
 
 

2 - initial_logo.svg

3 - animated_looped.svg

<svg width="200" height="200" viewBox="0 0 912 912" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    .red-rect {
      transform-origin: left center;
      animation: fallIn 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    }
    
    .blue-path {
      transform-origin: left center;
      animation: swingIn 5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s infinite;
    }
    
    .yellow-path {
      transform-origin: left center;
      animation: swingIn 5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s infinite;
    }
    
    @keyframes fallIn {
      0%, 100% {
        transform: translateY(-912px) rotate(-10deg);
      }
      15%, 80% {
        transform: translateY(0) rotate(0deg);
      }
    }
    
    @keyframes swingIn {
      0%, 100% {
        transform: rotate(45deg);
        opacity: 0;
      }
      15%, 80% {
        transform: rotate(0deg);
        opacity: 1;
      }
    }
  </style>
  <rect class="red-rect" x="174" y="123" width="214" height="665" rx="24" fill="#E74D31"/>
  <path class="blue-path" d="M482 764C482 777.255 492.745 788 506 788H760.056C781.976 788 792.424 761.033 776.226 746.265L522.17 514.626C506.761 500.577 482 511.509 482 532.361V764Z" fill="#415CF5"/>
  <path class="yellow-path" d="M482 147C482 133.745 492.745 123 506 123H760.056C781.976 123 792.424 149.967 776.226 164.735L522.17 396.374C506.761 410.423 482 399.491 482 378.639V147Z" fill="#F4B544"/>
</svg>