<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 {
  -webkit-mask:conic-gradient(from 60deg,#000 60deg,#0000 0);
  animation:t 6s infinite;
}

@keyframes j {
  0%,
  16.66%{-webkit-mask:conic-gradient(from 60deg,#0000 60deg ,#000 0)}
  16.67%,
  33.33%{-webkit-mask:conic-gradient(from 60deg,#0000 120deg,#000 0)}
  33.34%,
  50%   {-webkit-mask:conic-gradient(from 60deg,#0000 180deg,#000 0)}
  50.01%,
  66.66%{-webkit-mask:conic-gradient(from 60deg,#0000 240deg,#000 0)}
  66.67%,
  83.33%{-webkit-mask:conic-gradient(from 60deg,#0000 300deg,#000 0)}
  83.34%,
  100%  {-webkit-mask:conic-gradient(from 60deg,#0000 360deg,#000 0)}
}

@keyframes t {
  0%     {transform:translate(0);     opacity:1;-webkit-mask:conic-gradient(from 60deg,#000 60deg,#0000 0);}
  16.66% {transform:translate(50px,0);opacity:0;-webkit-mask:conic-gradient(from 60deg,#000 60deg,#0000 0);}
    
  16.67% {transform:translate(0);           opacity:1;-webkit-mask:conic-gradient(from 120deg,#000 60deg,#0000 0);}
  33.33% {transform:translate(25px,43.33px);opacity:0;-webkit-mask:conic-gradient(from 120deg,#000 60deg,#0000 0);}
    
  33.34% {transform:translate(0);            opacity:1;-webkit-mask:conic-gradient(from 180deg,#000 60deg,#0000 0);}
  50%    {transform:translate(-25px,43.33px);opacity:0;-webkit-mask:conic-gradient(from 180deg,#000 60deg,#0000 0);}
    
  50.01% {transform:translate(0);      opacity:1;-webkit-mask:conic-gradient(from 240deg,#000 60deg,#0000 0);}
  66.66% {transform:translate(-50px,0);opacity:0;-webkit-mask:conic-gradient(from 240deg,#000 60deg,#0000 0);}
    
  66.67% {transform:translate(0);             opacity:1;-webkit-mask:conic-gradient(from 300deg,#000 60deg,#0000 0);}
  83.33% {transform:translate(-25px,-43.33px);opacity:0;-webkit-mask:conic-gradient(from 300deg,#000 60deg,#0000 0);}
    
  83.34% {transform:translate(0);            opacity:1;-webkit-mask:conic-gradient(from 360deg,#000 60deg,#0000 0);}
  100%   {transform:translate(25px,-43.33px);opacity:0;-webkit-mask:conic-gradient(from 360deg,#000 60deg,#0000 0);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.