1.wheel-and-hamster {
2  --dur: 1s;
3  position: relative;
4  width: 12em;
5  height: 12em;
6  font-size: 14px;
7}
8
9.wheel,
10.hamster,
11.hamster div,
12.spoke {
13  position: absolute;
14}
15
16.wheel,
17.spoke {
18  border-radius: 50%;
19  top: 0;
20  left: 0;
21  width: 100%;
22  height: 100%;
23}
24
25.wheel {
26  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
27  z-index: 2;
28}
29
30.hamster {
31  animation: hamster var(--dur) ease-in-out infinite;
32  top: 50%;
33  left: calc(50% - 3.5em);
34  width: 7em;
35  height: 3.75em;
36  transform: rotate(4deg) translate(-0.8em,1.85em);
37  transform-origin: 50% 0;
38  z-index: 1;
39}
40
41.hamster__head {
42  animation: hamsterHead var(--dur) ease-in-out infinite;
43  background: hsl(30,90%,55%);
44  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
45  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
46		0.75em -1.55em 0 hsl(30,90%,90%) inset;
47  top: 0;
48  left: -2em;
49  width: 2.75em;
50  height: 2.5em;
51  transform-origin: 100% 50%;
52}
53
54.hamster__ear {
55  animation: hamsterEar var(--dur) ease-in-out infinite;
56  background: hsl(0,90%,85%);
57  border-radius: 50%;
58  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
59  top: -0.25em;
60  right: -0.25em;
61  width: 0.75em;
62  height: 0.75em;
63  transform-origin: 50% 75%;
64}
65
66.hamster__eye {
67  animation: hamsterEye var(--dur) linear infinite;
68  background-color: hsl(0,0%,0%);
69  border-radius: 50%;
70  top: 0.375em;
71  left: 1.25em;
72  width: 0.5em;
73  height: 0.5em;
74}
75
76.hamster__nose {
77  background: hsl(0,90%,75%);
78  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
79  top: 0.75em;
80  left: 0;
81  width: 0.2em;
82  height: 0.25em;
83}
84
85.hamster__body {
86  animation: hamsterBody var(--dur) ease-in-out infinite;
87  background: hsl(30,90%,90%);
88  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
89  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
90		0.15em -0.5em 0 hsl(30,90%,80%) inset;
91  top: 0.25em;
92  left: 2em;
93  width: 4.5em;
94  height: 3em;
95  transform-origin: 17% 50%;
96  transform-style: preserve-3d;
97}
98
99.hamster__limb--fr,
100.hamster__limb--fl {
101  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
102  top: 2em;
103  left: 0.5em;
104  width: 1em;
105  height: 1.5em;
106  transform-origin: 50% 0;
107}
108
109.hamster__limb--fr {
110  animation: hamsterFRLimb var(--dur) linear infinite;
111  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
112  transform: rotate(15deg) translateZ(-1px);
113}
114
115.hamster__limb--fl {
116  animation: hamsterFLLimb var(--dur) linear infinite;
117  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
118  transform: rotate(15deg);
119}
120
121.hamster__limb--br,
122.hamster__limb--bl {
123  border-radius: 0.75em 0.75em 0 0;
124  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
125  top: 1em;
126  left: 2.8em;
127  width: 1.5em;
128  height: 2.5em;
129  transform-origin: 50% 30%;
130}
131
132.hamster__limb--br {
133  animation: hamsterBRLimb var(--dur) linear infinite;
134  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
135  transform: rotate(-25deg) translateZ(-1px);
136}
137
138.hamster__limb--bl {
139  animation: hamsterBLLimb var(--dur) linear infinite;
140  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
141  transform: rotate(-25deg);
142}
143
144.hamster__tail {
145  animation: hamsterTail var(--dur) linear infinite;
146  background: hsl(0,90%,85%);
147  border-radius: 0.25em 50% 50% 0.25em;
148  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
149  top: 1.5em;
150  right: -0.5em;
151  width: 1em;
152  height: 0.5em;
153  transform: rotate(30deg) translateZ(-1px);
154  transform-origin: 0.25em 0.25em;
155}
156
157.spoke {
158  animation: spoke var(--dur) linear infinite;
159  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
160		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
161}
162
163/* Animations */
164@keyframes hamster {
165  from, to {
166    transform: rotate(4deg) translate(-0.8em,1.85em);
167  }
168
169  50% {
170    transform: rotate(0) translate(-0.8em,1.85em);
171  }
172}
173
174@keyframes hamsterHead {
175  from, 25%, 50%, 75%, to {
176    transform: rotate(0);
177  }
178
179  12.5%, 37.5%, 62.5%, 87.5% {
180    transform: rotate(8deg);
181  }
182}
183
184@keyframes hamsterEye {
185  from, 90%, to {
186    transform: scaleY(1);
187  }
188
189  95% {
190    transform: scaleY(0);
191  }
192}
193
194@keyframes hamsterEar {
195  from, 25%, 50%, 75%, to {
196    transform: rotate(0);
197  }
198
199  12.5%, 37.5%, 62.5%, 87.5% {
200    transform: rotate(12deg);
201  }
202}
203
204@keyframes hamsterBody {
205  from, 25%, 50%, 75%, to {
206    transform: rotate(0);
207  }
208
209  12.5%, 37.5%, 62.5%, 87.5% {
210    transform: rotate(-2deg);
211  }
212}
213
214@keyframes hamsterFRLimb {
215  from, 25%, 50%, 75%, to {
216    transform: rotate(50deg) translateZ(-1px);
217  }
218
219  12.5%, 37.5%, 62.5%, 87.5% {
220    transform: rotate(-30deg) translateZ(-1px);
221  }
222}
223
224@keyframes hamsterFLLimb {
225  from, 25%, 50%, 75%, to {
226    transform: rotate(-30deg);
227  }
228
229  12.5%, 37.5%, 62.5%, 87.5% {
230    transform: rotate(50deg);
231  }
232}
233
234@keyframes hamsterBRLimb {
235  from, 25%, 50%, 75%, to {
236    transform: rotate(-60deg) translateZ(-1px);
237  }
238
239  12.5%, 37.5%, 62.5%, 87.5% {
240    transform: rotate(20deg) translateZ(-1px);
241  }
242}
243
244@keyframes hamsterBLLimb {
245  from, 25%, 50%, 75%, to {
246    transform: rotate(20deg);
247  }
248
249  12.5%, 37.5%, 62.5%, 87.5% {
250    transform: rotate(-60deg);
251  }
252}
253
254@keyframes hamsterTail {
255  from, 25%, 50%, 75%, to {
256    transform: rotate(30deg) translateZ(-1px);
257  }
258
259  12.5%, 37.5%, 62.5%, 87.5% {
260    transform: rotate(10deg) translateZ(-1px);
261  }
262}
263
264@keyframes spoke {
265  from {
266    transform: rotate(0);
267  }
268
269  to {
270    transform: rotate(-1turn);
271  }
272}