3.0bpw.svg

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" role="img" aria-labelledby="title desc">
  <title id="title">Cute kitten</title>
  <desc id="desc">A stylized illustration of a cute orange kitten with big eyes, a pink nose, whiskers, and a bow.</desc>

  <defs>
    <!-- Background -->
    <radialGradient id="bgGrad" cx="50%" cy="40%" r="70%">
      <stop offset="0%" stop-color="#fff7ef"/>
      <stop offset="60%" stop-color="#ffe7d6"/>
      <stop offset="100%" stop-color="#f9e5ff"/>
    </radialGradient>

    <!-- Fur -->
    <radialGradient id="furGrad" cx="50%" cy="35%" r="65%">
      <stop offset="0%" stop-color="#ffd8a8"/>
      <stop offset="55%" stop-color="#ffb86b"/>
      <stop offset="100%" stop-color="#e9924f"/>
    </radialGradient>

    <!-- Inner ear -->
    <linearGradient id="innerEarGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffd1d1"/>
      <stop offset="100%" stop-color="#ff9fb4"/>
    </linearGradient>

    <!-- Eyes -->
    <radialGradient id="irisGrad" cx="50%" cy="45%" r="60%">
      <stop offset="0%" stop-color="#5ad06a"/>
      <stop offset="65%" stop-color="#2f8f3a"/>
      <stop offset="100%" stop-color="#1d6f2a"/>
    </radialGradient>

    <!-- Nose and tongue -->
    <linearGradient id="noseGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ff9db0"/>
      <stop offset="100%" stop-color="#ff6f8a"/>
    </linearGradient>
    <linearGradient id="tongueGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffb3c1"/>
      <stop offset="100%" stop-color="#ff7a93"/>
    </linearGradient>

    <!-- Bow -->
    <linearGradient id="bowGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ff7ec2"/>
      <stop offset="100%" stop-color="#e24ba0"/>
    </linearGradient>

    <!-- Subtle shadow -->
    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000" flood-opacity="0.25"/>
    </filter>
  </defs>

  <!-- Soft background circle -->
  <circle cx="256" cy="256" r="230" fill="url(#bgGrad)"/>

  <!-- Ground shadow -->
  <ellipse cx="256" cy="420" rx="120" ry="20" fill="#000" opacity="0.12"/>

  <!-- Kitten -->
  <g id="kitten" filter="url(#shadow)">
    <!-- Ears (behind head) -->
    <polygon points="130,95 175,160 95,175" fill="url(#furGrad)" stroke="#9a5a33" stroke-width="3"/>
    <polygon points="382,95 417,175 337,160" fill="url(#furGrad)" stroke="#9a5a33" stroke-width="3"/>

    <!-- Inner ears -->
    <polygon points="130,110 168,160 102,170" fill="url(#innerEarGrad)"/>
    <polygon points="382,110 410,170 344,160" fill="url(#innerEarGrad)"/>

    <!-- Head -->
    <ellipse cx="256" cy="270" rx="140" ry="120" fill="url(#furGrad)" stroke="#9a5a33" stroke-width="3"/>

    <!-- Cheek blush -->
    <circle cx="200" cy="310" r="24" fill="#ffb3b3" opacity="0.45"/>
    <circle cx="312" cy="310" r="24" fill="#ffb3b3" opacity="0.45"/>

    <!-- Eyes -->
    <g id="left-eye">
      <circle cx="206" cy="240" r="28" fill="#ffffff"/>
      <circle cx="206" cy="244" r="18" fill="url(#irisGrad)"/>
      <circle cx="206" cy="244" r="9" fill="#0b0b0b"/>
      <circle cx="198" cy="234" r="5.5" fill="#ffffff"/>
      <circle cx="212" cy="252" r="3" fill="#ffffff" opacity="0.8"/>
    </g>
    <g id="right-eye">
      <circle cx="306" cy="240" r="28" fill="#ffffff"/>
      <circle cx="306" cy="244" r="18" fill="url(#irisGrad)"/>
      <circle cx="306" cy="244" r="9" fill="#0b0b0b"/>
      <circle cx="298" cy="234" r="5.5" fill="#ffffff"/>
      <circle cx="312" cy="252" r="3" fill="#ffffff" opacity="0.8"/>
    </g>

    <!-- Eyelids -->
    <path d="M178,228 Q206,214 234,228" fill="none" stroke="#8b5a3c" stroke-width="4" stroke-linecap="round"/>
    <path d="M278,228 Q306,214 334,228" fill="none" stroke="#8b5a3c" stroke-width="4" stroke-linecap="round"/>

    <!-- Nose -->
    <polygon points="246,295 266,295 256,308" fill="url(#noseGrad)" stroke="#8b3b4a" stroke-width="2"/>

    <!-- Mouth -->
    <path d="M256,308 C256,322 244,328 232,328" fill="none" stroke="#8b3b4a" stroke-width="3" stroke-linecap="round"/>
    <path d="M256,308 C256,322 268,328 280,328" fill="none" stroke="#8b3b4a" stroke-width="3" stroke-linecap="round"/>
    <!-- Tiny tongue -->
    <path d="M248,328 Q256,338 264,328 Q256,334 248,328 Z" fill="url(#tongueGrad)" stroke="#d45d76" stroke-width="1"/>

    <!-- Whiskers -->
    <g stroke="#8b5a3c" stroke-width="3" stroke-linecap="round">
      <line x1="160" y1="300" x2="220" y2="298"/>
      <line x1="160" y1="312" x2="220" y2="312"/>
      <line x1="160" y1="324" x2="220" y2="326"/>

      <line x1="292" y1="298" x2="352" y2="300"/>
      <line x1="292" y1="312" x2="352" y2="312"/>
      <line x1="292" y1="326" x2="352" y2="324"/>
    </g>

    <!-- Bow -->
    <g transform="translate(0,0)">
      <!-- Left loop -->
      <path d="M206,160
               C170,130 160,100 200,92
               C240,100 236,140 206,160 Z"
            fill="url(#bowGrad)" stroke="#b23a86" stroke-width="2"/>
      <!-- Right loop -->
      <path d="M306,160
               C342,130 352,100 312,92
               C272,100 276,140 306,160 Z"
            fill="url(#bowGrad)" stroke="#b23a86" stroke-width="2"/>
      <!-- Knot -->
      <circle cx="256" cy="158" r="14" fill="url(#bowGrad)" stroke="#b23a86" stroke-width="2"/>
      <circle cx="250" cy="152" r="4" fill="#ffffff" opacity="0.7"/>
    </g>
  </g>
</svg>