Draw and Animate SVGs in Claude 3.5 Sonnet

Claude 3.5 Sonnet currently uses SVG files and ASCII art to create images.

Prompt

Create an image of a dog and animate the tail

SVG Code

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes wag {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(10deg); }
    }
    @keyframes breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    #tail {
      animation: wag 0.5s infinite;
      transform-origin: 160px 120px;
    }
    #body {
      animation: breathe 4s infinite;
      transform-origin: center;
    }
  </style>

  <!-- Body -->
  <g id="body">
    <ellipse cx="100" cy="120" rx="60" ry="40" fill="tan"/>
    
    <!-- Head -->
    <circle cx="70" cy="70" r="30" fill="tan"/>
    
    <!-- Ears -->
    <path d="M50 50 Q40 30 30 50 Z" fill="brown"/>
    <path d="M90 50 Q100 30 110 50 Z" fill="brown"/>
    
    <!-- Eyes -->
    <circle cx="60" cy="65" r="5" fill="black"/>
    <circle cx="80" cy="65" r="5" fill="black"/>
    
    <!-- Nose -->
    <ellipse cx="70" cy="75" rx="6" ry="4" fill="black"/>
    
    <!-- Mouth -->
    <path d="M65 80 Q70 85 75 80" fill="none" stroke="black" stroke-width="2"/>
    
    <!-- Legs -->
    <rect x="50" y="150" width="15" height="30" fill="tan"/>
    <rect x="135" y="150" width="15" height="30" fill="tan"/>
  </g>
  
  <!-- Tail -->
  <path id="tail" d="M160 120 Q180 100 190 120" fill="none" stroke="tan" stroke-width="10"/>
</svg>

Leave a Reply