1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2  <defs>
3    <style>
4      /* Slow, rhythmic deep breathing animation */
5      .breathe {
6        transform-origin: 7.5px 15px; /* Pivot at the floor to expand upwards */
7        animation: breathe-squash 4.5s infinite ease-in-out;
8      }
9
10      /* Shadow expands slightly as the body inflates */
11      .shadow-breathe {
12        transform-origin: 7.5px 15.5px;
13        animation: shadow-pulse 4.5s infinite ease-in-out;
14      }
15
16      /* Zzz Particle Base Styles */
17      .z-particle {
18        opacity: 0;
19      }
20      .z1 { animation: float-1 6s infinite ease-in-out; animation-delay: 0s; }
21      .z2 { animation: float-2 6s infinite ease-in-out; animation-delay: 2s; }
22      .z3 { animation: float-3 6s infinite ease-in-out; animation-delay: 4s; }
23
24      /* Breathing Keyframes (Slow inhale, hold, exhale, pause) */
25      @keyframes breathe-squash {
26        0%, 80%, 100% { transform: scale(1, 1); }
27        30%, 40% { transform: scale(1.02, 1.25); } /* Chest expands/inflates */
28      }
29
30      @keyframes shadow-pulse {
31        0%, 80%, 100% { transform: scaleX(1); opacity: 0.4; }
32        30%, 40% { transform: scaleX(1.05); opacity: 0.5; }
33      }
34
35      /* Swaying and fading floating Z keyframes (Adjusted for lowered head) */
36      @keyframes float-1 {
37        0%   { transform: translate(5px, 8px) scale(0.4); opacity: 0; }
38        10%  { opacity: 1; }
39        30%  { transform: translate(9px, 4px) scale(0.6); }
40        50%  { transform: translate(4px, 0px) scale(0.8); }
41        70%  { transform: translate(8px, -4px) scale(1.0); }
42        90%  { opacity: 0.8; }
43        100% { transform: translate(6px, -8px) scale(1.1); opacity: 0; }
44      }
45
46      @keyframes float-2 {
47        0%   { transform: translate(8px, 9px) scale(0.3); opacity: 0; }
48        10%  { opacity: 1; }
49        30%  { transform: translate(5px, 5px) scale(0.5); }
50        50%  { transform: translate(9px, 1px) scale(0.7); }
51        70%  { transform: translate(6px, -3px) scale(0.9); }
52        90%  { opacity: 0.8; }
53        100% { transform: translate(8px, -7px) scale(1.0); opacity: 0; }
54      }
55
56      @keyframes float-3 {
57        0%   { transform: translate(6px, 7px) scale(0.5); opacity: 0; }
58        10%  { opacity: 1; }
59        30%  { transform: translate(9px, 3px) scale(0.7); }
60        50%  { transform: translate(4px, -1px) scale(0.9); }
61        70%  { transform: translate(8px, -5px) scale(1.1); }
62        90%  { opacity: 0.8; }
63        100% { transform: translate(5px, -9px) scale(1.2); opacity: 0; }
64      }
65    </style>
66
67    <!-- Pixel Art "Z" Definitions -->
68    <g id="pixel-z">
69      <rect x="0" y="0" width="4" height="1" />
70      <rect x="2" y="1" width="1" height="1" />
71      <rect x="1" y="2" width="1" height="1" />
72      <rect x="0" y="3" width="4" height="1" />
73    </g>
74    
75    <g id="pixel-z-small">
76      <rect x="0" y="0" width="3" height="1" />
77      <rect x="1" y="1" width="1" height="1" />
78      <rect x="0" y="2" width="3" height="1" />
79    </g>
80  </defs>
81
82  <!-- Ground Shadow (Widened for the splooted posture) -->
83  <rect id="ground-shadow" class="shadow-breathe" x="-1" y="15" width="17" height="1" fill="#000000" />
84
85  <!-- Floating Zzz Bubbles -->
86  <g class="zzz-particles">
87    <use href="#pixel-z" class="z-particle z1" fill="#90A4AE" />
88    <use href="#pixel-z-small" class="z-particle z2" fill="#B0BEC5" />
89    <use href="#pixel-z" class="z-particle z3" fill="#CFD8DC" />
90  </g>
91
92  <!-- Splooted / Melted Sleeping Pose -->
93  <g class="breathe">
94    <!-- Legs pointing up from behind (Relaxed Sploot) -->
95    <g fill="#DE886D">
96      <rect id="outer-left-leg-up" x="3" y="9" width="1" height="1"/>
97      <rect id="inner-left-leg-up" x="5" y="9" width="1" height="1"/>
98      <rect id="inner-right-leg-up" x="9" y="9" width="1" height="1"/>
99      <rect id="outer-right-leg-up" x="11" y="9" width="1" height="1"/>
100    </g>
101
102    <!-- Squashed Body Resting on the Floor -->
103    <g fill="#DE886D">
104      <!-- Main flattened torso -->
105      <g class="cat-behind" fill="#DE886D">
106        <rect x="2" y="9" width="1" height="2"/><rect x="3" y="8" width="1" height="3"/>
107        <rect x="11" y="8" width="1" height="3"/><rect x="12" y="9" width="1" height="2"/>
108        
109      </g>
110      <g class="cat-inner-ear" fill="#F2A7B0">
111        <rect x="3" y="9" width="1" height="2"/><rect x="11" y="9" width="1" height="2"/>
112      </g>
113      <rect id="torso-sploot" x="1" y="10" width="13" height="5"/>
114      <g class="cat-face">
115        <rect x="7" y="12.8" width="1" height="1" fill="#F2A7B0"/>
116        <g fill="#F5EDE6">
117          <rect x="-1" y="11.5" width="4" height="0.35"/><rect x="-1" y="14.2" width="4" height="0.35"/>
118          <rect x="12" y="11.5" width="4" height="0.35"/><rect x="12" y="14.2" width="4" height="0.35"/>
119        </g>
120      </g>
121      
122      <!-- Arms spread flat on the ground -->
123      <rect id="left-arm-sploot" x="-1" y="13" width="2" height="2"/>
124      <rect id="right-arm-sploot" x="14" y="13" width="2" height="2"/>
125    </g>
126    
127    <!-- Ultra-Thin Shut Eyes (Dashes) -->
128    <g fill="#000000">
129      <rect id="left-eye-shut" x="3.5" y="12.5" width="2" height="0.4"/>
130      <rect id="right-eye-shut" x="9.5" y="12.5" width="2" height="0.4"/>
131    </g>
132  </g>
133</svg>