3.5bpw.svg

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Definitions for gradients and filters -->
  <defs>
    <!-- Gradient for the body -->
    <linearGradient id="bodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#f8d7a8;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#f0c070;stop-opacity:1" />
    </linearGradient>
    
    <!-- Gradient for the ears -->
    <radialGradient id="earGradient">
      <stop offset="0%" style="stop-color:#f8d7a8;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#d4a574;stop-opacity:1" />
    </radialGradient>
    
    <!-- Fur texture filter -->
    <filter id="furTexture">
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" result="noise" />
      <feComposite in="noise" in2="SourceGraphic" operator="multiply" />
    </filter>
    
    <!-- Drop shadow filter -->
    <filter id="dropShadow">
      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.2"/>
    </filter>
  </defs>
  
  <!-- Tail -->
  <path d="M 90 210 Q 50 220, 40 250 Q 35 280, 70 285 Q 100 280, 90 210" 
        fill="url(#bodyGradient)" stroke="#d4a574" stroke-width="1" filter="url(#dropShadow)">
    <animate attributeName="d" 
             values="M 90 210 Q 50 220, 40 250 Q 35 280, 70 285 Q 100 280, 90 210;
                     M 90 210 Q 60 225, 45 245 Q 40 275, 75 280 Q 95 275, 90 210;
                     M 90 210 Q 50 220, 40 250 Q 35 280, 70 285 Q 100 280, 90 210"
             dur="4s" repeatCount="indefinite"/>
  </path>
  
  <!-- Body -->
  <ellipse cx="150" cy="200" rx="60" ry="50" fill="url(#bodyGradient)" 
           stroke="#d4a574" stroke-width="1" filter="url(#furTexture)"/>
  
  <!-- Front paws -->
  <ellipse cx="115" cy="230" rx="15" ry="20" fill="url(#bodyGradient)" 
           stroke="#d4a574" stroke-width="1"/>
  <ellipse cx="185" cy="230" rx="15" ry="20" fill="url(#bodyGradient)" 
           stroke="#d4a574" stroke-width="1"/>
  
  <!-- Back legs -->
  <ellipse cx="110" cy="240" rx="18" ry="25" fill="url(#bodyGradient)" 
           stroke="#d4a574" stroke-width="1"/>
  <ellipse cx="190" cy="240" rx="18" ry="25" fill="url(#bodyGradient)" 
           stroke="#d4a574" stroke-width="1"/>
  
  <!-- Head -->
  <circle cx="150" cy="120" r="50" fill="url(#bodyGradient)" 
          stroke="#d4a574" stroke-width="1" filter="url(#furTexture)"/>
  
  <!-- Left ear -->
  <path d="M 110 90 Q 90 70, 110 50 Q 130 70, 120 90" 
        fill="url(#earGradient)" stroke="#d4a574" stroke-width="1"/>
  <!-- Inner ear -->
  <path d="M 110 85 Q 100 75, 110 65 Q 120 75, 115 85" 
        fill="#ffb3d9" opacity="0.7"/>
  
  <!-- Right ear -->
  <path d="M 190 90 Q 210 70, 190 50 Q 170 70, 180 90" 
        fill="url(#earGradient)" stroke="#d4a574" stroke-width="1"/>
  <!-- Inner ear -->
  <path d="M 190 85 Q 200 75, 190 65 Q 180 75, 185 85" 
        fill="#ffb3d9" opacity="0.7"/>
  
  <!-- Eyes -->
  <!-- Left eye -->
  <ellipse cx="130" cy="115" rx="12" ry="15" fill="#333333" stroke="#222" stroke-width="1"/>
  <ellipse cx="132" cy="112" rx="4" ry="5" fill="white" opacity="0.8"/>
  
  <!-- Right eye -->
  <ellipse cx="170" cy="115" rx="12" ry="15" fill="#333333" stroke="#222" stroke-width="1"/>
  <ellipse cx="172" cy="112" rx="4" ry="5" fill="white" opacity="0.8"/>
  
  <!-- Eye pupils (animated to look around) -->
  <circle cx="130" cy="115" r="5" fill="#000000">
    <animate attributeName="cx" values="130;132;130;128;130" dur="8s" repeatCount="indefinite"/>
    <animate attributeName="cy" values="115;113;115;117;115" dur="8s" repeatCount="indefinite"/>
  </circle>
  <circle cx="170" cy="115" r="5" fill="#000000">
    <animate attributeName="cx" values="170;172;170;168;170" dur="8s" repeatCount="indefinite"/>
    <animate attributeName="cy" values="115;113;115;117;115" dur="8s" repeatCount="indefinite"/>
  </circle>
  
  <!-- Nose -->
  <path d="M 150 130 L 145 135 L 155 135 Z" fill="#ff99cc" stroke="#ff66bb" stroke-width="0.5"/>
  
  <!-- Mouth -->
  <path d="M 150 135 Q 140 140, 130 138" stroke="#333333" stroke-width="1.5" 
        fill="none" stroke-linecap="round"/>
  <path d="M 150 135 Q 160 140, 170 138" stroke="#333333" stroke-width="1.5" 
        fill="none" stroke-linecap="round"/>
  
  <!-- Whiskers -->
  <g stroke="#333333" stroke-width="0.8" stroke-linecap="round">
    <!-- Left whiskers -->
    <line x1="110" y1="130" x2="70" y2="125">
      <animate attributeName="x2" values="70;72;70" dur="3s" repeatCount="indefinite"/>
    </line>
    <line x1="110" y1="135" x2="70" y2="135">
      <animate attributeName="x2" values="70;72;70" dur="3s" begin="0.5s" repeatCount="indefinite"/>
    </line>
    <line x1="110" y1="140" x2="70" y2="145">
      <animate attributeName="x2" values="70;72;70" dur="3s" begin="1s" repeatCount="indefinite"/>
    </line>
    
    <!-- Right whiskers -->
    <line x1="190" y1="130" x2="230" y2="125">
      <animate attributeName="x2" values="230;228;230" dur="3s" repeatCount="indefinite"/>
    </line>
    <line x1="190" y1="135" x2="230" y2="135">
      <animate attributeName="x2" values="230;228;230" dur="3s" begin="0.5s" repeatCount="indefinite"/>
    </line>
    <line x1="190" y1="140" x2="230" y2="145">
      <animate attributeName="x2" values="230;228;230" dur="3s" begin="1s" repeatCount="indefinite"/>
    </line>
  </g>
  
  <!-- Cheek blush -->
  <ellipse cx="100" cy="135" rx="12" ry="8" fill="#ffb3d9" opacity="0.3"/>
  <ellipse cx="200" cy="135" rx="12" ry="8" fill="#ffb3d9" opacity="0.3"/>
  
  <!-- Fur highlights -->
  <path d="M 120 90 Q 130 85, 140 90" stroke="#ffffff" stroke-width="2" 
        fill="none" opacity="0.6"/>
  <path d="M 160 90 Q 170 85, 180 90" stroke="#ffffff" stroke-width="2" 
        fill="none" opacity="0.6"/>
</svg>