<div class="hungry"></div>
body {
height:100vh;
margin:0;
display:grid;
place-items:center;
background: lightblue;
overflow:hidden;
}
.hungry {
width: 180px;
height: 180px;
display:grid;
}
.hungry:before,
.hungry:after {
content:"";
grid-area:1/1;
border-radius: 50%;
border: 15px solid #ad5216;
border: 1px solid #983e05;
box-shadow:
0 0 0 3px inset #e18647,
0 0 0 15px inset #ad5216,
0 0 0 21px inset #d9854c;
--c: radial-gradient(farthest-side, #d64123 94%,#0000);
--b: radial-gradient(farthest-side, #000 94%,#0000);
background:
var(--c) 95px 30px,
var(--b) 89px 30px,
var(--c) 56px 106px,
var(--b) 44px 120px,
var(--c) 26px 75px,
var(--b) 136px 57px,
var(--c) 51px 15px,
var(--b) 85px 80px,
var(--c) 62px 58px,
var(--b) 45px 63px,
var(--c) 107px 98px,
var(--b) 100px 111px,
var(--c) 129px 54px,
var(--b) 64px 63px,
var(--c) 90px 136px,
var(--b) 140px 89px,
#f6d353;
background-size: 30px 30px,8px 8px;
background-origin:border-box;
background-repeat: no-repeat;
}
.hungry:before {
animation:j 6s infinite;
}
.hungry:after {
mask:conic-gradient(from 60deg,#000 60deg,#0000 0);
animation:t 6s infinite;
}
@keyframes j {
0%,
16.66%{mask:conic-gradient(from 60deg,#0000 60deg ,#000 0)}
16.67%,
33.33%{mask:conic-gradient(from 60deg,#0000 120deg,#000 0)}
33.34%,
50% {mask:conic-gradient(from 60deg,#0000 180deg,#000 0)}
50.01%,
66.66%{mask:conic-gradient(from 60deg,#0000 240deg,#000 0)}
66.67%,
83.33%{mask:conic-gradient(from 60deg,#0000 300deg,#000 0)}
83.34%,
100% {mask:conic-gradient(from 60deg,#0000 360deg,#000 0)}
}
@keyframes t {
0% {transform:translate(0); opacity:1;mask:conic-gradient(from 60deg,#000 60deg,#0000 0);}
16.66% {transform:translate(50px,0);opacity:0;mask:conic-gradient(from 60deg,#000 60deg,#0000 0);}
16.67% {transform:translate(0); opacity:1;mask:conic-gradient(from 120deg,#000 60deg,#0000 0);}
33.33% {transform:translate(25px,43.33px);opacity:0;mask:conic-gradient(from 120deg,#000 60deg,#0000 0);}
33.34% {transform:translate(0); opacity:1;mask:conic-gradient(from 180deg,#000 60deg,#0000 0);}
50% {transform:translate(-25px,43.33px);opacity:0;mask:conic-gradient(from 180deg,#000 60deg,#0000 0);}
50.01% {transform:translate(0); opacity:1;mask:conic-gradient(from 240deg,#000 60deg,#0000 0);}
66.66% {transform:translate(-50px,0);opacity:0;mask:conic-gradient(from 240deg,#000 60deg,#0000 0);}
66.67% {transform:translate(0); opacity:1;mask:conic-gradient(from 300deg,#000 60deg,#0000 0);}
83.33% {transform:translate(-25px,-43.33px);opacity:0;mask:conic-gradient(from 300deg,#000 60deg,#0000 0);}
83.34% {transform:translate(0); opacity:1;mask:conic-gradient(from 360deg,#000 60deg,#0000 0);}
100% {transform:translate(25px,-43.33px);opacity:0;mask:conic-gradient(from 360deg,#000 60deg,#0000 0);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.