1<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500" shape-rendering="crispEdges">
2 <defs>
3 <style>
4 .once {
5 animation-duration: 1.5s;
6 animation-fill-mode: forwards;
7 animation-iteration-count: 1;
8 }
9
10 .scale-top-left {
11 transform-box: fill-box;
12 transform-origin: top left;
13 }
14
15 .shadow {
16 transform-origin: 7.5px 15.5px;
17 animation-name: shadow-wake;
18 animation-timing-function: linear;
19 }
20
21 .body-motion {
22 transform-origin: 7.5px 15px;
23 animation-name: body-motion;
24 animation-timing-function: cubic-bezier(0.24, 0.8, 0.24, 1);
25 }
26
27 .torso-shift {
28 animation: torso-shift 1.5s linear forwards;
29 }
30
31 .torso-shape {
32 animation: torso-shape 1.5s linear forwards;
33 }
34
35 .arm-left {
36 animation: arm-left 1.5s linear forwards;
37 }
38
39 .arm-right {
40 animation: arm-right 1.5s linear forwards;
41 }
42
43 .leg-shift {
44 animation: leg-shift 1.5s linear forwards;
45 }
46
47 .leg-grow {
48 animation: leg-grow 1.5s linear forwards;
49 }
50
51 .eye-shift {
52 animation: eye-shift 1.5s linear forwards;
53 }
54
55 .eye-shape {
56 animation: eye-shape 1.5s linear forwards;
57 }
58
59 @keyframes shadow-wake {
60 0% {
61 opacity: 0.4;
62 transform: scaleX(1);
63 }
64 20% {
65 opacity: 0.47;
66 transform: scaleX(0.56);
67 }
68 33.333% {
69 opacity: 0.54;
70 transform: scaleX(0.42);
71 }
72 46.667% {
73 opacity: 0.48;
74 transform: scaleX(0.48);
75 }
76 56% {
77 opacity: 0.52;
78 transform: scaleX(0.56);
79 }
80 66.667%, 100% {
81 opacity: 0.5;
82 transform: scaleX(0.5294);
83 }
84 }
85
86 @keyframes body-motion {
87 0% {
88 transform: translate(0, 0) scale(1, 1) rotate(0deg);
89 }
90 6.667% {
91 transform: translate(0, 0.35px) scale(1.03, 0.96) rotate(0deg);
92 }
93 20% {
94 transform: translate(0, -2.6px) scale(0.98, 1.04) rotate(-6deg);
95 }
96 33.333% {
97 transform: translate(0, -4.1px) scale(0.9, 1.22) rotate(2deg);
98 }
99 46.667% {
100 transform: translate(0, -2px) scale(0.95, 1.11) rotate(0deg);
101 }
102 54% {
103 transform: translate(0, -0.55px) scale(1.02, 0.98) rotate(-4deg);
104 }
105 60% {
106 transform: translate(0, -0.2px) scale(0.99, 1.02) rotate(2.5deg);
107 }
108 66.667%, 100% {
109 transform: translate(0, 0) scale(1, 1) rotate(0deg);
110 }
111 }
112
113 @keyframes torso-shift {
114 0% {
115 transform: translate(-1px, 4px);
116 }
117 8% {
118 transform: translate(-0.82px, 3.4px);
119 }
120 20%, 100% {
121 transform: translate(0, 0);
122 }
123 }
124
125 @keyframes torso-shape {
126 0% {
127 transform: scale(1.1818, 0.7143);
128 }
129 8% {
130 transform: scale(1.14, 0.76);
131 }
132 20%, 100% {
133 transform: scale(1, 1);
134 }
135 }
136
137 @keyframes arm-left {
138 0% {
139 transform: translate(-1px, 4px);
140 }
141 8% {
142 transform: translate(-0.8px, 3.4px);
143 }
144 20%, 100% {
145 transform: translate(0, 0);
146 }
147 }
148
149 @keyframes arm-right {
150 0% {
151 transform: translate(1px, 4px);
152 }
153 8% {
154 transform: translate(0.8px, 3.4px);
155 }
156 20%, 100% {
157 transform: translate(0, 0);
158 }
159 }
160
161 @keyframes leg-shift {
162 0% {
163 transform: translate(0, -2px);
164 }
165 8% {
166 transform: translate(0, -1.5px);
167 }
168 20%, 100% {
169 transform: translate(0, 0);
170 }
171 }
172
173 @keyframes leg-grow {
174 0% {
175 transform: scale(1, 0.25);
176 }
177 8% {
178 transform: scale(1, 0.45);
179 }
180 20%, 100% {
181 transform: scale(1, 1);
182 }
183 }
184
185 @keyframes eye-shift {
186 0% {
187 transform: translate(-0.5px, 4.5px);
188 }
189 6.667% {
190 transform: translate(-0.5px, 4.15px);
191 }
192 10% {
193 transform: translate(-0.2px, 1px);
194 }
195 14% {
196 transform: translate(-0.06px, 0.2px);
197 }
198 20%, 54% {
199 transform: translate(0, 0);
200 }
201 58% {
202 transform: translate(0, 0.5px);
203 }
204 62%, 100% {
205 transform: translate(0, 0);
206 }
207 }
208
209 @keyframes eye-shape {
210 0% {
211 transform: scale(2, 0.2);
212 }
213 6.667% {
214 transform: scale(2.12, 0.12);
215 }
216 10% {
217 transform: scale(1.45, 1.8);
218 }
219 14% {
220 transform: scale(0.92, 1.08);
221 }
222 20%, 54% {
223 transform: scale(1, 1);
224 }
225 58% {
226 transform: scale(1, 0.08);
227 }
228 62% {
229 transform: scale(1, 1.08);
230 }
231 66.667%, 100% {
232 transform: scale(1, 1);
233 }
234 }
235 </style>
236 </defs>
237
238 <rect class="once shadow" x="-1" y="15" width="17" height="1" fill="#000000" opacity="0.4"/>
239
240 <g class="once body-motion">
241 <g fill="#DE886D">
242 <g class="once leg-shift">
243 <rect class="once scale-top-left leg-grow" x="3" y="11" width="1" height="4"/>
244 </g>
245 <g class="once leg-shift">
246 <rect class="once scale-top-left leg-grow" x="5" y="11" width="1" height="4"/>
247 </g>
248 <g class="once leg-shift">
249 <rect class="once scale-top-left leg-grow" x="9" y="11" width="1" height="4"/>
250 </g>
251 <g class="once leg-shift">
252 <rect class="once scale-top-left leg-grow" x="11" y="11" width="1" height="4"/>
253 </g>
254 </g>
255
256 <g id="accessory-anchor" class="once torso-shift">
257 <g class="cat-behind" fill="#DE886D">
258 <rect x="2" y="5" width="1" height="2"/><rect x="3" y="4" width="1" height="3"/>
259 <rect x="11" y="4" width="1" height="3"/><rect x="12" y="5" width="1" height="2"/>
260 <rect x="13" y="12" width="2" height="1"/><rect x="14" y="10.5" width="1" height="1.5"/>
261 </g>
262 <g class="cat-inner-ear" fill="#F2A7B0">
263 <rect x="3" y="5" width="1" height="2"/><rect x="11" y="5" width="1" height="2"/>
264 </g>
265 <rect class="once scale-top-left torso-shape" x="2" y="6" width="11" height="7" fill="#DE886D"/>
266 <g class="cat-face">
267 <rect x="7" y="9.5" width="1" height="1" fill="#F2A7B0"/>
268 <g fill="#F5EDE6">
269 <rect x="-1" y="8" width="4" height="0.35"/><rect x="-1" y="11.3" width="4" height="0.35"/>
270 <rect x="12" y="8" width="4" height="0.35"/><rect x="12" y="11.3" width="4" height="0.35"/>
271 </g>
272 </g>
273 </g>
274
275 <g class="once arm-left">
276 <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
277 </g>
278
279 <g class="once arm-right">
280 <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
281 </g>
282
283 <g fill="#000000">
284 <g class="once eye-shift">
285 <rect class="once scale-top-left eye-shape" x="4" y="8" width="1" height="2"/>
286 </g>
287 <g class="once eye-shift">
288 <rect class="once scale-top-left eye-shape" x="10" y="8" width="1" height="2"/>
289 </g>
290 </g>
291 </g>
292</svg>
whiskers-waking.svg