1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500"> 2 <defs> 3 <style> 4 .body-exhausted { 5 transform-origin: 7.5px 15px; 6 animation: heavy-breathe 2.5s infinite ease-in-out; 7 } 8 .arm-fan { 9 transform-origin: 14px 10px; 10 animation: fan-self 0.4s infinite alternate ease-in-out; 11 } 12 .smoke { 13 opacity: 0; 14 animation: puff-smoke 3s infinite ease-out; 15 } 16 .sm1 { animation-delay: 0s; } 17 .sm2 { animation-delay: 1s; } 18 .sm3 { animation-delay: 2s; } 19 20 /* Error warning flash */ 21 .error-warning { 22 animation: error-flash 0.8s infinite ease-in-out; 23 } 24 25 @keyframes heavy-breathe { 26 0%, 100% { transform: scale(1, 1) translateY(0); } 27 50% { transform: scale(1.05, 0.9) translateY(1.5px); } 28 } 29 @keyframes fan-self { 30 0% { transform: rotate(0deg); } 31 100% { transform: rotate(-60deg); } 32 } 33 @keyframes puff-smoke { 34 0% { transform: translate(7.5px, 6px) scale(0.5); opacity: 0; } 35 20% { opacity: 0.6; } 36 100% { transform: translate(7.5px, -15px) scale(2); opacity: 0; } 37 } 38 @keyframes error-flash { 39 0%, 100% { opacity: 1; } 40 50% { opacity: 0.15; } 41 } 42 </style> 43 <g id="smoke-puff"> 44 <rect x="-1" y="-1" width="2" height="2" fill="#B0BEC5" rx="0.5"/> 45 <rect x="0" y="-2" width="2" height="2" fill="#CFD8DC" rx="0.5"/> 46 </g> 47 </defs> 48 49 <rect id="ground-shadow" x="-1" y="15" width="17" height="1" fill="#000000" opacity="0.5"/> 50 51 <!-- Smoke --> 52 <g> 53 <use href="#smoke-puff" class="smoke sm1"/> 54 <use href="#smoke-puff" class="smoke sm2" transform="translate(-2, 0)"/> 55 <use href="#smoke-puff" class="smoke sm3" transform="translate(2, 0)"/> 56 </g> 57 58 <g id="accessory-anchor" class="body-exhausted"> 59 <!-- Sploot Legs --> 60 <g fill="#DE886D"> 61 <rect x="3" y="9" width="1" height="1"/> 62 <rect x="5" y="9" width="1" height="1"/> 63 <rect x="9" y="9" width="1" height="1"/> 64 <rect x="11" y="9" width="1" height="1"/> 65 </g> 66 67 <!-- Torso Sploot --> 68 <g fill="#DE886D"> 69 <g class="cat-behind" fill="#DE886D"> 70 <rect x="2" y="9" width="1" height="2"/><rect x="3" y="8" width="1" height="3"/> 71 <rect x="11" y="8" width="1" height="3"/><rect x="12" y="9" width="1" height="2"/> 72 73 </g> 74 <g class="cat-inner-ear" fill="#F2A7B0"> 75 <rect x="3" y="9" width="1" height="2"/><rect x="11" y="9" width="1" height="2"/> 76 </g> 77 <rect x="1" y="10" width="13" height="5"/> 78 <g class="cat-face"> 79 <rect x="7" y="12.8" width="1" height="1" fill="#F2A7B0"/> 80 <g fill="#F5EDE6"> 81 <rect x="-1" y="11.5" width="4" height="0.35"/><rect x="-1" y="14.2" width="4" height="0.35"/> 82 <rect x="12" y="11.5" width="4" height="0.35"/><rect x="12" y="14.2" width="4" height="0.35"/> 83 </g> 84 </g> 85 <rect x="-1" y="13" width="2" height="2"/> 86 </g> 87 88 <!-- Fanning Arm (closer to body) --> 89 <g class="arm-fan"> 90 <rect x="13" y="11" width="2" height="2" fill="#DE886D"/> 91 </g> 92 93 <!-- XX Eyes --> 94 <g fill="#000000"> 95 <!-- Left X --> 96 <rect x="3" y="12" width="0.6" height="2.2" transform="rotate(45 3.3 13.1)"/> 97 <rect x="3" y="12" width="0.6" height="2.2" transform="rotate(-45 3.3 13.1)"/> 98 <!-- Right X --> 99 <rect x="10" y="12" width="0.6" height="2.2" transform="rotate(45 10.3 13.1)"/> 100 <rect x="10" y="12" width="0.6" height="2.2" transform="rotate(-45 10.3 13.1)"/> 101 </g> 102 </g> 103 104 <!-- Error Warning (flashing) --> 105 <g class="error-warning"> 106 <!-- Error text only --> 107 108 </g> 109</svg>