1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2 <defs>
3 <style>
4 /* 16-Second Master Sequence for Idle Actions */
5 .action-body {
6 transform-origin: 7.5px 13px; /* Pivot at the base of the torso */
7 animation: action-body 16s infinite ease-in-out;
8 }
9
10 /* Continuous Subtle Breathing (Syncs exactly 5 times per 16s loop) */
11 .breathe-anim {
12 transform-origin: 7.5px 13px;
13 animation: breathe 3.2s infinite ease-in-out;
14 }
15
16 /* Shadow shrinking and shifting matching actions */
17 .shadow-anim {
18 transform-origin: 7.5px 15.5px;
19 animation: shadow-action 16s infinite ease-in-out;
20 }
21
22 /* Left Arm (Scratching and Yawn Stretching) */
23 .arm-l {
24 transform-origin: 1px 10px;
25 animation: arm-l-idle 16s infinite ease-in-out;
26 }
27
28 /* Right Arm (Yawn Stretching) */
29 .arm-r {
30 transform-origin: 14px 10px;
31 animation: arm-r-idle 16s infinite ease-in-out;
32 }
33
34 /* Eye Tracking (Looking around) */
35 .eyes-look {
36 animation: eye-track 16s infinite ease-in-out;
37 }
38
39 /* Occasional Blinks and shutting during Yawn */
40 .eyes-blink {
41 transform-origin: 7.5px 9px;
42 animation: eye-blink 16s infinite linear;
43 }
44
45 /* Yawn Mouth Appearance */
46 .yawn-mouth {
47 transform-origin: 7.5px 11px;
48 animation: yawn-mouth-anim 16s infinite ease-in-out;
49 opacity: 0;
50 }
51
52 /* Tiny tear that appears during the big yawn */
53 .yawn-tear {
54 animation: tear-fall 16s infinite ease-in-out;
55 opacity: 0;
56 }
57
58 /* --- Keyframes --- */
59
60 @keyframes breathe {
61 0%, 100% { transform: scale(1, 1) translate(0, 0); }
62 50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
63 }
64
65 @keyframes action-body {
66 0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scale(1, 1) translate(0, 0); }
67 /* Look Right Tilt */
68 12%, 22% { transform: scale(1, 1) translate(1px, 0); }
69 /* Look Left Tilt */
70 42%, 50% { transform: scale(1, 1) translate(-1px, 0); }
71 /* Scratching Lean */
72 30%, 36% { transform: scale(1, 1) translate(0.5px, 0); }
73 /* Deep Yawn Stretch */
74 60% { transform: scale(0.95, 1.05) translate(0px, -1px); } /* Stretch up */
75 65% { transform: scale(0.9, 1.1) translate(0px, -2px); } /* Peak stretch */
76 72% { transform: scale(1.05, 0.95) translate(0px, 1px); } /* Heavy sigh / squash down */
77 76% { transform: scale(1, 1) translate(0px, 0px); } /* Recover */
78 }
79
80 @keyframes shadow-action {
81 0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
82 12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
83 42%, 50% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
84 30%, 36% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
85 60% { transform: scaleX(0.95) translate(0, 0); opacity: 0.45; }
86 65% { transform: scaleX(0.9) translate(0, 0); opacity: 0.4; }
87 72% { transform: scaleX(1.05) translate(0, 0); opacity: 0.55; }
88 76% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
89 }
90
91 @keyframes eye-track {
92 0%, 10%, 25%, 38%, 52%, 58%, 80%, 100% { transform: translate(0px, 0px); }
93 12%, 22% { transform: translate(3px, 0px); } /* Look Right */
94 42%, 50% { transform: translate(-3px, 0px); } /* Look Left */
95 60%, 75% { transform: translate(0px, -1px); } /* Look slightly up during yawn */
96 }
97
98 @keyframes eye-blink {
99 0%, 3%, 7%, 18%, 22%, 43%, 47%, 56%, 83%, 87%, 100% { transform: scaleY(1); }
100 5%, 20%, 45%, 85% { transform: scaleY(0.1); } /* Quick Blinks */
101 /* Yawn Closed Eyes */
102 60% { transform: scaleY(1); }
103 62%, 72% { transform: scaleY(0.1); } /* Eyes completely shut */
104 75% { transform: scaleY(1); }
105 }
106
107 @keyframes arm-l-idle {
108 0%, 28% { transform: translate(0, 0) rotate(0deg); }
109
110 /* Occasional Scratching Sequence (Left Arm) */
111 30% { transform: translate(1px, -3px) rotate(15deg); }
112 31% { transform: translate(1.5px, -4px) rotate(35deg); } /* Up */
113 32% { transform: translate(0.5px, -2.5px) rotate(0deg); } /* Down */
114 33% { transform: translate(1.5px, -4px) rotate(35deg); }
115 34% { transform: translate(0.5px, -2.5px) rotate(0deg); }
116 35% { transform: translate(1.5px, -4px) rotate(35deg); }
117 36% { transform: translate(0.5px, -2.5px) rotate(0deg); }
118
119 38%, 58% { transform: translate(0, 0) rotate(0deg); }
120
121 /* Yawn Stretch */
122 62% { transform: translate(-1px, -2px) rotate(45deg); }
123 65% { transform: translate(-2px, -3px) rotate(80deg); } /* Full outward stretch */
124 72% { transform: translate(0px, 1px) rotate(-15deg); } /* Relax down */
125 76%, 100% { transform: translate(0, 0) rotate(0deg); }
126 }
127
128 @keyframes arm-r-idle {
129 0%, 58% { transform: translate(0, 0) rotate(0deg); }
130 /* Yawn Stretch */
131 62% { transform: translate(1px, -2px) rotate(-45deg); }
132 65% { transform: translate(2px, -3px) rotate(-80deg); } /* Full outward stretch */
133 72% { transform: translate(0px, 1px) rotate(15deg); } /* Relax down */
134 76%, 100% { transform: translate(0, 0) rotate(0deg); }
135 }
136
137 @keyframes yawn-mouth-anim {
138 0%, 58%, 76%, 100% { opacity: 0; transform: scale(0.1); }
139 60% { opacity: 1; transform: scale(0.5, 0.2); }
140 65% { opacity: 1; transform: scale(1.1, 1.4); } /* Wide Open */
141 72% { opacity: 1; transform: scale(0.6, 0.4); } /* Shrinking */
142 75% { opacity: 0; transform: scale(0.1); }
143 }
144
145 @keyframes tear-fall {
146 0%, 64%, 80%, 100% { opacity: 0; transform: translateY(0); }
147 66% { opacity: 1; transform: translateY(0); } /* Appears at corner of eye */
148 72% { opacity: 1; transform: translateY(2.5px); } /* Slides down cheek */
149 75% { opacity: 0; transform: translateY(3px); } /* Fades out */
150 }
151 </style>
152 </defs>
153
154 <!-- Ground Shadow -->
155 <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
156
157 <!-- Static Character Legs (extended up to stay connected during yawn stretch) -->
158 <g id="legs" fill="#DE886D">
159 <rect id="outer-left-leg" x="3" y="12" width="1" height="3"/>
160 <rect id="inner-left-leg" x="5" y="12" width="1" height="3"/>
161 <rect id="inner-right-leg" x="9" y="12" width="1" height="3"/>
162 <rect id="outer-right-leg" x="11" y="12" width="1" height="3"/>
163 </g>
164
165 <!-- Animated Upper Body (Combines occasional actions + continuous breathing) -->
166 <g class="action-body">
167 <g class="breathe-anim">
168
169 <!-- Torso -->
170 <g class="cat-behind" fill="#DE886D">
171 <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
172 <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
173 <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
174 </g>
175 <g class="cat-inner-ear" fill="#F2A7B0">
176 <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
177 </g>
178 <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
179 <g class="cat-face">
180 <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
181 <g fill="#F5EDE6">
182 <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
183 <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
184 </g>
185 </g>
186
187 <!-- Arms -->
188 <g class="arm-l">
189 <rect id="left-arm" x="0" y="9" width="2" height="2" fill="#DE886D"/>
190 </g>
191 <g class="arm-r">
192 <rect id="right-arm" x="13" y="9" width="2" height="2" fill="#DE886D"/>
193 </g>
194
195 <!-- Yawning Mouth (Hidden usually) -->
196 <rect class="yawn-mouth" x="6" y="10" width="3" height="2" fill="#000000"/>
197
198 <!-- Eyes Group -->
199 <g class="eyes-look" fill="#000000">
200 <g class="eyes-blink">
201 <rect id="left-eye" x="4" y="8" width="1" height="2"/>
202 <rect id="right-eye" x="10" y="8" width="1" height="2"/>
203 </g>
204 </g>
205
206 <!-- Yawn Tear Drop (A tiny detail for the big stretch) -->
207 <rect class="yawn-tear" x="3.5" y="10" width="1" height="1" fill="#40C4FF"/>
208
209 </g>
210 </g>
211</svg>
whiskers-living.svg