< Back to Frontend Friday Folks Index

Ryuk

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 (527 characters)
1 
<div></div>
2 
<div></div>
3 
<style>
4 
  body {
5 
    margin: 130 0 0 30;
6 
    background: conic-gradient(at 50% 92px,#475862 45deg,#BAC7CE 45deg 315deg, #475862 0);
7 
  }
8 
  div+div {
9 
    transform: translate(220px,-120px) scaleX(-1) rotate(-15deg);
10 
  }
11 
  div {
12 
    width: 120px;
13 
    height: 120px;
14 
    background:
15 
    radial-gradient(#4E2B24 15px,#000 0 20px,transparent 0 50px,#000 0),
16 
    radial-gradient(circle at 56px 74px, #0000 50px,#5A6042 0),
17 
    #868A64
18 
    ;
19 
    transform: rotate(-15deg);
20 
    border-radius: 0 50%;
21 
  }
22 
</style>

This was a nice solve with gradients. One div for each eye, with one of them transformed and the background as a single conic-gradient.

< Back to Frontend Friday Folks Index