
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 byhttps://codepen.io/wifi,https://codepen.io/wifi/pen/olKxE
Lets make our pacman HTML structure, eye is optional I guess.
<divclass="pacman"><divclass="eye"></div></div>
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%,0100%,00);}
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.35sinfinitecubic-bezier(0.85,0,0.15,1);animation-direction:alternate;}@keyframesmouth{0%{clip-path:polygon(100%0,100%25%,50%50%,50%50%,100%75%,100%100%,0100%,00)}100%{clip-path:polygon(100%0,100%50%,50%50%,50%50%,100%50%,100%100%,0100%,00)}}
All together with some food:
Top comments(2)

- Email
- LocationIndia
- WorkFull-Stack developer
- Joined
Nice work, 👍

Thanks ☺️
For further actions, you may consider blocking this person and/orreporting abuse