< Back to Frontend Friday Folks Index

Pacman

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (848 characters)
1 
<div class="pacman"></div>
2 
<div class="dots"></div>
3 
<div class="ghost"></div>
4 
<style>
5 
  body {
6 
    background: #000;
7 
    display: grid;
8 
    place-items: center;
9 
  }
10 
  .ghost {
11 
    height: 60px;
12 
    width: 60px;
13 
    position: fixed;
14 
    right: 60px;
15 
    border-radius: 50% 50% 0 0;
16 
    clip-path: shape(from 100% 100%, line to 100% 0, line to 0 0, line to 0 60px,line to 10px 50px,line to 20px 60px,line to 30px 50px,line to 40px 60px,line to 50px 50px);
17 
    background: #C74E4E;
18 
  }
19 
  .dots {
20 
    height: 10px;
21 
    width: 10px;
22 
    background: #fff;
23 
    border-radius: 50%;
24 
    box-shadow: -30px 0 0 #fff,30px 0 0 #fff;
25 
  }
26 
  .pacman {
27 
    width: 70px;
28 
    height: 70px;
29 
    position: fixed;
30 
    left: 55px;
31 
    background:
32 
      radial-gradient(transparent 30px, #000 0),
33 
      conic-gradient(#E0E246 45deg, #000 0 135deg, #E0E246 0);
34 
  }
35 
</style>

This was done during the CSS Battle session at the JSCraftCamp 2025. I learned about the new shape() function, which allows for more complex clipping paths and shapes in CSS.

< Back to Frontend Friday Folks Index