2.0bpw.svg

<svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
  <title id="title">Cute Kitten</title>
  <desc id="desc">A cute cartoon kitten with soft fur, big eyes, whiskers, paws, and a tail.</desc>

  <defs>
    <!-- Fur gradient -->
    <radialGradient id="furGrad" cx="50%" cy="40%" r="70%">
      <stop offset="0%" stop-color="#f7c46b"/>
      <stop offset="60%" stop-color="#e7a45a"/>
      <stop offset="100%" stop-color="#c87d3f"/>
    </radialGradient>

    <!-- Belly patch gradient -->
    <radialGradient id="bellyGrad" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#fff5e8"/>
      <stop offset="100%" stop-color="#f1ded0"/>
    </radialGradient>

    <!-- Inner ear gradient -->
    <radialGradient id="innerEarGrad" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#ffd5e0"/>
      <stop offset="100%" stop-color="#f0b6c3"/>
    </radialGradient>

    <!-- Eye iris gradient -->
    <radialGradient id="irisGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#66e0b5"/>
      <stop offset="70%" stop-color="#2aa67a"/>
      <stop offset="100%" stop-color="#1f7a5a"/>
    </radialGradient>

    <!-- Nose gradient -->
    <radialGradient id="noseGrad" cx="50%" cy="50%" r="60%">
      <stop offset="0%" stop-color="#ff8aa1"/>
      <stop offset="100%" stop-color="#e06b84"/>
    </radialGradient>

    <!-- Drop shadow for the kitten -->
    <filter id="kittenShadow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
      <feOffset in="blur" dx="0" dy="3" result="offsetBlur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.4"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Soft glow for eyes -->
    <filter id="eyeGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1.2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Clip path for body stripes -->
    <clipPath id="bodyClip">
      <ellipse cx="300" cy="360" rx="150" ry="180"/>
    </clipPath>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="#f7f4ff"/>

  <g id="kitten" filter="url(#kittenShadow)">
    <!-- Tail (behind body) -->
    <path d="M 430 360
             C 520 380 520 480 450 520
             C 480 500 480 450 460 430
             C 440 415 435 390 430 360 Z"
          fill="url(#furGrad)" stroke="#8c5a30" stroke-opacity="0.25" stroke-width="2"/>

    <!-- Body -->
    <ellipse cx="300" cy="360" rx="150" ry="180" fill="url(#furGrad)" stroke="#8c5a30" stroke-opacity="0.25" stroke-width="2"/>

    <!-- Belly patch -->
    <ellipse cx="300" cy="410" rx="95" ry="120" fill="url(#bellyGrad)" opacity="0.95"/>

    <!-- Body stripes (clipped to body) -->
    <g clip-path="url(#bodyClip)" opacity="0.35">
      <path d="M 190 290 C 230 310 260 330 290 350" stroke="#8c5a30" stroke-width="14" stroke-linecap="round" fill="none"/>
      <path d="M 170 330 C 210 350 240 370 270 390" stroke="#8c5a30" stroke-width="14" stroke-linecap="round" fill="none"/>
      <path d="M 210 420 C 250 440 280 460 310 480" stroke="#8c5a30" stroke-width="14" stroke-linecap="round" fill="none"/>
      <path d="M 230 250 C 270 270 300 290 330 310" stroke="#8c5a30" stroke-width="14" stroke-linecap="round" fill="none"/>
    </g>

    <!-- Spots -->
    <ellipse cx="230" cy="320" rx="26" ry="18" fill="#d58a4f" opacity="0.6"/>
    <ellipse cx="360" cy="430" rx="22" ry="16" fill="#d58a4f" opacity="0.6"/>
    <ellipse cx="265" cy="470" rx="18" ry="12" fill="#d58a4f" opacity="0.6"/>

    <!-- Ears (behind head) -->
    <path d="M 220 115 L 190 50 L 255 100 Z" fill="url(#furGrad)" stroke="#8c5a30" stroke-opacity="0.25" stroke-width="2"/>
    <path d="M 380 115 L 410 50 L 345 100 Z" fill="url(#furGrad)" stroke="#8c5a30" stroke-opacity="0.25" stroke-width="2"/>

    <!-- Inner ears -->
    <path d="M 230 110 L 200 70 L 250 95 Z" fill="url(#innerEarGrad)" opacity="0.9"/>
    <path d="M 370 110 L 400 70 L 350 95 Z" fill="url(#innerEarGrad)" opacity="0.9"/>

    <!-- Head -->
    <circle cx="300" cy="220" r="110" fill="url(#furGrad)" stroke="#8c5a30" stroke-opacity="0.25" stroke-width="2"/>

    <!-- Cheeks -->
    <ellipse cx="265" cy="255" rx="22" ry="16" fill="#ffd8e2" opacity="0.85"/>
    <ellipse cx="335" cy="255" rx="22" ry="16" fill="#ffd8e2" opacity="0.85"/>

    <!-- Eyes -->
    <g filter="url(#eyeGlow)">
      <ellipse cx="265" cy="215" rx="26" ry="34" fill="url(#irisGrad)" stroke="#1a5e44" stroke-opacity="0.2" stroke-width="1.5"/>
      <ellipse cx="335" cy="215" rx="26" ry="34" fill="url(#irisGrad)" stroke="#1a5e44" stroke-opacity="0.2" stroke-width="1.5"/>

      <!-- Pupils -->
      <ellipse cx="265" cy="218" rx="6" ry="14" fill="#1b1b1b"/>
      <ellipse cx="335" cy="218" rx="6" ry="14" fill="#1b1b1b"/>

      <!-- Eye shine -->
      <circle cx="258" cy="205" r="4" fill="#ffffff" opacity="0.9"/>
      <circle cx="328" cy="205" r="4" fill="#ffffff" opacity="0.9"/>
    </g>

    <!-- Nose -->
    <path d="M 295 245 L 305 245 L 300 255 Z" fill="url(#noseGrad)"/>

    <!-- Mouth -->
    <path d="M 300 255 C 292 265 280 265 272 255" stroke="#7a3b3b" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M 300 255 C 308 265 320 265 328 255" stroke="#7a3b3b" stroke-width="3" fill="none" stroke-linecap="round"/>

    <!-- Whiskers -->
    <g stroke="#7a3b3b" stroke-width="3" stroke-linecap="round" opacity="0.9">
      <!-- Left -->
      <line x1="272" y1="252" x2="220" y2="245"/>
      <line x1="272" y1="258" x2="215" y2="258"/>
      <line x1="272" y1="264" x2="220" y2="272"/>
      <!-- Right -->
      <line x1="328" y1="252" x2="380" y2="245"/>
      <line x1="328" y1="258" x2="385" y2="258"/>
      <line x1="328" y1="264" x2="380" y2="272"/>
    </g>

    <!-- Front paws -->
    <ellipse cx="240" cy="520" rx="38" ry="26" fill="url(#furGrad)" stroke="#8c5a30" stroke-opacity="0.25" stroke-width="2"/>
    <ellipse cx="360" cy="520" rx="38" ry="26" fill="url(#furGrad)" stroke="#8c5a30" stroke-opacity="0.25" stroke-width="2"/>

    <!-- Toe beans -->
    <g fill="#f1ded0" opacity="0.95">
      <circle cx="228" cy="518" r="6"/>
      <circle cx="240" cy="525" r="6"/>
      <circle cx="252" cy="518" r="6"/>
      <circle cx="348" cy="518" r="6"/>
      <circle cx="360" cy="525" r="6"/>
      <circle cx="372" cy="518" r="6"/>
    </g>
  </g>
</svg>