File size: 5,822 Bytes
e756d26 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | <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> |