< Back to Frontend Friday Folks Index

Fox Head

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 (689 characters)
1 
<div></div>
2 
<div class="r"></div>
3 
<style>
4 
  body {
5 
    background: #293462;
6 
    display: flex;
7 
    place-items: center;
8 
    justify-content: center;
9 
    margin: 0;
10 
  }
11 
  .r {
12 
    transform: scaleX(-1);
13 
  }
14 
  div {
15 
    background:
16 
      radial-gradient(circle at 0px 40px, #FE5F55 40px, #293462 0) 10px 0 / 50px 40px no-repeat,
17 
      radial-gradient(circle at 30px 75px, #293462 15px, transparent 15px),
18 
      radial-gradient(circle at 0px 140px, #293462 40px, #FE5F55 0) 10px 0 / 50px 140px no-repeat,
19 
      linear-gradient(transparent 40px, #FE5F55 0 100px, #293462 0),
20 
      linear-gradient(to right,#FE5F55 0 10px, transparent 0)
21 
    ;
22 
    height: 140px;
23 
    width: 50px;
24 
  }
25 
</style>
26
The solution with gradients does not feel so great and it seems to be much easier using border-radius for what we have here. Still, it is possible to achieve the result with gradients and I'm happy I could make it - even if it take a lot longer than expected. One cool thing here is to mirror the face of the fox by using transform: scaleX(-1). I wonder whether it's possible to the whole face with gradients though! 🤔
< Back to Frontend Friday Folks Index