1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500"> 2 <defs> 3 <style> 4 /* 10-Second Idle Loop — Looking Around + Scratching (no yawn) */ 5 .action-body { 6 transform-origin: 7.5px 13px; 7 animation: action-body 10s infinite ease-in-out; 8 } 9 10 .breathe-anim { 11 transform-origin: 7.5px 13px; 12 animation: breathe 3.2s infinite ease-in-out; 13 } 14 15 .shadow-anim { 16 transform-origin: 7.5px 15.5px; 17 animation: shadow-action 10s infinite ease-in-out; 18 } 19 20 .arm-l { 21 transform-origin: 1px 10px; 22 animation: arm-l-idle 10s infinite ease-in-out; 23 } 24 25 .eyes-look { 26 animation: eye-track 10s infinite ease-in-out; 27 } 28 29 .eyes-blink { 30 transform-origin: 7.5px 9px; 31 animation: eye-blink 10s infinite linear; 32 } 33 34 /* --- Keyframes --- */ 35 36 @keyframes breathe { 37 0%, 100% { transform: scale(1, 1) translate(0, 0); } 38 50% { transform: scale(1.02, 0.98) translate(0, 0.5px); } 39 } 40 41 @keyframes action-body { 42 0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scale(1,1) translate(0,0); } 43 /* Look Right */ 44 12%, 22% { transform: scale(1,1) translate(1px, 0); } 45 /* Look Left */ 46 48%, 57% { transform: scale(1,1) translate(-1px, 0); } 47 /* Scratch Lean */ 48 33%, 38% { transform: scale(1,1) translate(0.5px, 0); } 49 } 50 51 @keyframes shadow-action { 52 0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scaleX(1) translate(0,0); opacity: 0.5; } 53 12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; } 54 48%, 57% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; } 55 33%, 38% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; } 56 } 57 58 @keyframes eye-track { 59 0%, 10%, 25%, 43%, 60%, 100% { transform: translate(0, 0); } 60 12%, 22% { transform: translate(3px, 0); } /* Look Right */ 61 48%, 57% { transform: translate(-3px, 0); } /* Look Left */ 62 } 63 64 @keyframes eye-blink { 65 0%, 3%, 7%, 18%, 22%, 47%, 51%, 78%, 82%, 100% { transform: scaleY(1); } 66 5%, 20%, 49%, 80% { transform: scaleY(0.1); } 67 } 68 69 @keyframes arm-l-idle { 70 0%, 30% { transform: translate(0,0) rotate(0deg); } 71 /* Scratching Sequence */ 72 33% { transform: translate(1px, -3px) rotate(15deg); } 73 34% { transform: translate(1.5px, -4px) rotate(35deg); } 74 35% { transform: translate(0.5px, -2.5px) rotate(0deg); } 75 36% { transform: translate(1.5px, -4px) rotate(35deg); } 76 37% { transform: translate(0.5px, -2.5px) rotate(0deg); } 77 38% { transform: translate(1.5px, -4px) rotate(35deg); } 78 39% { transform: translate(0.5px, -2.5px) rotate(0deg); } 79 42%, 100% { transform: translate(0,0) rotate(0deg); } 80 } 81 </style> 82 </defs> 83 84 <!-- Ground Shadow --> 85 <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/> 86 87 <!-- Static Legs --> 88 <g id="legs" fill="#DE886D"> 89 <rect x="3" y="12" width="1" height="3"/> 90 <rect x="5" y="12" width="1" height="3"/> 91 <rect x="9" y="12" width="1" height="3"/> 92 <rect x="11" y="12" width="1" height="3"/> 93 </g> 94 95 <!-- Animated Upper Body --> 96 <g class="action-body"> 97 <g class="breathe-anim"> 98 <!-- Torso --> 99 <g class="cat-behind" fill="#DE886D"> 100 <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/> 101 <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/> 102 <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/> 103 </g> 104 <g class="cat-inner-ear" fill="#F2A7B0"> 105 <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/> 106 </g> 107 <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/> 108 <g class="cat-face"> 109 <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/> 110 <g fill="#F5EDE6"> 111 <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/> 112 <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/> 113 </g> 114 </g> 115 <!-- Left Arm (scratches) --> 116 <g class="arm-l"> 117 <rect x="0" y="9" width="2" height="2" fill="#DE886D"/> 118 </g> 119 <!-- Right Arm (static) --> 120 <rect x="13" y="9" width="2" height="2" fill="#DE886D"/> 121 <!-- Eyes --> 122 <g class="eyes-look" fill="#000000"> 123 <g class="eyes-blink"> 124 <rect x="4" y="8" width="1" height="2"/> 125 <rect x="10" y="8" width="1" height="2"/> 126 </g> 127 </g> 128 </g> 129 </g> 130</svg>