<div class="pacman"></div>
<div class="bean"></div>

body {
  --mouthOpen: polygon(0% 0%, 100% 0%, 100% 20%, 50% 50%, 100% 80%, 100% 100%, 0% 100%);
  --mouthClose:polygon(0% 0%, 100% 0%, 100% 50%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
  --backColor:#333;
  background: var(--backColor);
  color: #fff;
  padding: 0;
  margin: 0;
  font-family: 'Slabo 27px', serif;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  
}

.pacman {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #F2D648;
  position: relative;
  clip-path: var(--mouthOpen);
  animation-name: eat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  box-shadow: 0 -3px 10px rgba(0,0,0,.7) inset;
}
.pacman::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 19px;
  right: 34px;
  z-index: 2
}
.pacman::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 18px;
  right: 32px;
  z-index: 1
}



@keyframes eat {
  0% {
    clip-path: var(--mouthOpen);
  }

  50% {
    clip-path: var(--mouthClose);
  }

  100% {
    clip-path: var(--mouthOpen);
  }
}

.bean {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(10px);
  animation-name: food;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  position: relative;
  z-index: -1;
  box-shadow: 0 -3px 5px rgba(0,0,0,.5) inset;
}

@keyframes food {
  0% {
    transform: translateX(10px);    
  }

  100% {
    transform: translateX(-100px);    
  }
}