1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2  <defs>
3    <style>
4      .breathe-anim {
5        transform-origin: 7.5px 13px;
6        animation: breathe 3.2s infinite ease-in-out;
7      }
8
9      .eyes-blink {
10        transform-origin: 7.5px 9px;
11        animation: eye-blink 4s infinite ease-in-out;
12      }
13
14      #eyes-js, #body-js, #shadow-js {
15        transition: transform 0.2s ease-out;
16      }
17      #shadow-js {
18        transform-origin: 7.5px 15px;
19      }
20
21      @keyframes breathe {
22        0%, 100% { transform: scale(1, 1) translate(0, 0); }
23        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
24      }
25
26      @keyframes eye-blink {
27        0%, 10%, 100% { transform: scaleY(1); }
28        5% { transform: scaleY(0.1); }
29      }
30    </style>
31  </defs>
32
33  <!-- Ground Shadow (JS-controlled horizontal shift) -->
34  <g id="shadow-js">
35    <rect x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
36  </g>
37
38  <!-- Static Legs (slightly taller for upward body shift) -->
39  <g id="legs" fill="#DE886D">
40    <rect x="3" y="11" width="1" height="4"/>
41    <rect x="5" y="11" width="1" height="4"/>
42    <rect x="9" y="11" width="1" height="4"/>
43    <rect x="11" y="11" width="1" height="4"/>
44  </g>
45
46  <!-- Upper Body (JS body-shift + CSS breathe) -->
47  <g id="body-js">
48    <g class="breathe-anim">
49      <!-- Torso -->
50      <g class="cat-behind" fill="#DE886D">
51        <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
52        <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
53        <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
54      </g>
55      <g class="cat-inner-ear" fill="#F2A7B0">
56        <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
57      </g>
58      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
59      <g class="cat-face">
60        <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
61        <g fill="#F5EDE6">
62          <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
63          <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
64        </g>
65      </g>
66      <!-- Left Arm -->
67      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
68      <!-- Right Arm -->
69      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
70      <!-- Eyes: JS translate wrapper + CSS blink -->
71      <g id="eyes-js" fill="#000000">
72        <g class="eyes-blink">
73          <rect x="4" y="8" width="1" height="2"/>
74          <rect x="10" y="8" width="1" height="2"/>
75        </g>
76      </g>
77    </g>
78  </g>
79</svg>