DEV Community

Cover image for Animated pacman in HTML/CSS
Leiv Fredrik Berge
Leiv Fredrik Berge

Posted on

Animated pacman in HTML/CSS

You never know when you need a pacman to appear on your site. And when you do, you need it to be lightweight and performant.

Inspired by https://codepen.io/wifi, https://codepen.io/wifi/pen/olKxE

Lets make our pacman HTML structure, eye is optional I guess.

  <div class="pacman">
    <div class="eye"></div>    
  </div>
Enter fullscreen mode Exit fullscreen mode

My pacman is more squareish, since that is what i needed, feel free to change the border radius to 50%, and have a more default looking figure.

.pacman {
  background-color: yellow;
  border-radius: 24px;
  height: 210px;
  width: 210px;
  clip-path: polygon(100% 0, 100% 25%, 50% 50%, 50% 50%, 100% 75%, 100% 100%, 0 100%, 0 0);
}
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-07-01 at 14-36-41 CSS3 Animated Pacman

Lets animate it! Drop the clip-path, and add the keyframe animation. Set it to infinite and alternate direction. An unnessesary complicated animation curve, and your pacman lives!

.pacman {
  animation: mouth .35s infinite cubic-bezier(0.85, 0, 0.15, 1);
  animation-direction: alternate;
}

@keyframes mouth {
  0% { clip-path: polygon(100% 0, 100% 25%, 50% 50%, 50% 50%, 100% 75%, 100% 100%, 0 100%, 0 0) }
  100% { clip-path: polygon(100% 0, 100% 50%, 50% 50%, 50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0) }
}
Enter fullscreen mode Exit fullscreen mode

All together with some food:

Top comments (2)

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Nice work, πŸ‘

Collapse
 
lfbergee profile image
Leiv Fredrik Berge

Thanks ☺️