< Back to Frontend Friday Folks Index

Root Learn

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 (684 characters)
1 
<div></div>
2 
<style>
3 
body{background:#EFF2F1;display:grid;place-items:center;}
4 
div{width:180;height:180;background:#1c1c1c;
5 
    clip-path:shape(evenodd
6 
      from 0 0,
7 
      hline by 86px,
8 
      arc to 115px 90px of 21px 20px cw,
9 
      line to 155px 160px,
10 
      line to 180px 175px,
11 
      vline by 5px,
12 
      hline by -58px,
13 
      line to 69px 90px,
14 
      hline by -9px,
15 
      vline by 70px,
16 
      line to 80px 170px,
17 
      vline by 10px,
18 
      hline by -80px,
19 
      vline by -10px,
20 
      line to 20px 160px,
21 
      vline by -140px,
22 
      line to 0px 10px,
23 
      close,
24 
      move to 60px 15px,
25 
      hline by 20px,
26 
      arc to 80px 75px of 1q cw,
27 
      hline by -20px
28 
    )}
29 
</style>

Shaishav joined late and rescued the clip-path solution! Using arc works, if you know how to manipulate its values. Obviously, Shaishav had the right intuition and got us to the right values that it counted as 100%. Thanks!

< Back to Frontend Friday Folks Index