< Back to Frontend Friday Folks Index

Super Saiyan

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 (1603 characters)
1 
<div class="back hair left"></div>
2 
<div class="back hair right"></div>
3 
<div class="face"></div>
4 
<div class="mid hair left"></div>
5 
<div class="mid hair right"></div>
6 
<div class="top hair left"></div>
7 
<div class="top hair right"></div>
8 
<div class="mouth"></div>
9 
<style>
10 
  body {
11 
    background: #161616;
12 
  }
13 
  .hair {
14 
    position: absolute;
15 
    border-radius: 50%;
16 
    background: #EBAE11;
17 
    height: 60px;
18 
    width: 60px;
19 
  }
20 
  .back.hair.left,.back.hair.right {
21 
    background: conic-gradient(transparent 50%, #EBAE11 0);
22 
    transform: translate(140.5q,129.5q) rotate(-75deg);
23 
  }
24 
  .mid.hair.left,.mid.hair.right {
25 
    background: conic-gradient(transparent 50%, #EBAE11 0);
26 
    transform: translate(147px,104px) rotate(-30deg);
27 
  }
28 
  .top.hair.left,.top.hair.right {
29 
    height: 118px;
30 
    width: 120px;
31 
    background: linear-gradient(to right, #EBAE11 18px, transparent 0);
32 
    transform: translate(174.5px,58.5px) rotate(0deg);
33 
  }
34 
  .back.hair.right {
35 
    transform: translate(202q,129.5q) rotate(-105deg);
36 
  }
37 
  .mid.hair.right {
38 
    transform: translate(177px,104px) rotate(-150deg);
39 
  }
40 
  .top.hair.right {
41 
    transform: translate(89.5px,58.5px) rotate(180deg);
42 
  }
43 
  .face {
44 
    position: absolute;
45 
    top: 156;
46 
    left: 160;
47 
    height: 60px;
48 
    width: 80px;
49 
    background:linear-gradient(to right,#FFFFFF 50%,#FFDEB9 0);
50 
    border-radius: 0 0 40px 40px;
51 
  }
52 
  .mouth {
53 
    position: absolute;
54 
    top:186;
55 
    left:189.5;
56 
    width:22q;
57 
    height:21q;
58 
    border-radius: 50%;
59 
    background:conic-gradient(transparent .25turn, #161616 .25turn .75turn, transparent 0);
60 
  }
61 
</style>

I didn't get this to 100% using divs. I need to try it with gradients, I suppose!

Highlighted solution (1256 characters)
1 
<style>
2 
  &{background:
3 
    /* mouth */
4 
    radial-gradient(1q at 50% 0, #161616 10px, #0000 0) 0 196px,
5 
    /* top hair */
6 
    radial-gradient(1q at -42px 126px,#EBAE11 60px,#0000 0) 200px 0 / 200px no-repeat,
7 
    radial-gradient(1q at 242px 126px,#EBAE11 60px,#0000 0) 0 0 / 200px no-repeat,
8 
    /* mid hair */
9 
    conic-gradient(#161616 30deg,#0000 0 330deg, #161616 0) 0 18px,
10 
    radial-gradient(1q,#EBAE11 30px,#0000 0) -15px -8px,
11 
    radial-gradient(1q,#EBAE11 30px,#0000 0) 15px -8px,
12 
    /* face */
13 
    linear-gradient(to right,#fff 50%,#FFDEB9 0) 50% calc(50%) / 80px 50px no-repeat,
14 
    radial-gradient(1q at 0% calc(50% - 23px),#FFDEB9 40px,#0000 0) calc(50% + 20px) calc(50% + 49px) / 40px 60px no-repeat,
15 
    radial-gradient(1q at 100% calc(50% - 23px),#fff 40px,#0000 0) calc(50% - 20px) calc(50% + 49px) / 40px 60px no-repeat,
16 
    /* back hair left */
17 
    linear-gradient(193deg,#161616 50%,#0000 0) calc(50% - 30px) calc(50% + 9px) / 59px 61px no-repeat,
18 
    radial-gradient(1q,#EBAE11 28px,#0000 0) -31px 11px,
19 
    /* back hair right */
20 
    linear-gradient(calc(360deg - 193deg),#161616 50%,#0000 0) calc(50% + 30px) calc(50% + 9px) / 59px 61px no-repeat,
21 
    radial-gradient(1q,#EBAE11 28px,#0000 0) 31px 11px,
22 
    #161616
23 
   }
24 
</style>

...and here we are - done with gradients and even got to 100%, finally! There is probably a lot of potential to make this smaller, but I am happy to got to 100% at all.

< Back to Frontend Friday Folks Index