< Back to Frontend Friday Folks Index

One Piece

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 (1232 characters)
1 
<div f>
2 
<div h>
3 
  <div e l></div>
4 
  <div e r></div>
5 
</div>
6 
<div ts><p><p><p></div>
7 
</div>
8 
<style>
9 
  body{
10 
    background:#000;
11 
    display:grid;
12 
    place-content:center;
13 
  }
14 
  [e] {
15 
    background:#000;
16 
    position:absolute;
17 
    top:80;
18 
    left:29;
19 
    border-radius:50%;
20 
    rotate:150deg;
21 
    height:39;
22 
    width:50;
23 
  }
24 
  [l] {
25 
    left:90;
26 
    rotate:30deg;
27 
  }
28 
  [f] {
29 
    position:relative;
30 
    &:after,
31 
    &:before{
32 
      z-index:-1;
33 
      position:absolute;
34 
      left:-22;top:23;
35 
      content:'';
36 
      background:
37 
        radial-gradient(1q at 14q 26q,#fff 13q,#0000),
38 
        radial-gradient(1q at 26q 14q,#fff 13q,#0000),
39 
        linear-gradient(45deg,#000 27q,#0000 0 48q,#000 0),
40 
        linear-gradient(135deg,#000 25q,#fff 0 56q,#000 0),
41 
        #000
42 
      ;
43 
      height:50;
44 
      width:50;
45 
      -webkit-box-reflect:right 120q;
46 
    }
47 
    &:after {
48 
      left:-22;top:126;
49 
      rotate:270deg;
50 
      -webkit-box-reflect:below 120q;
51 
    }
52 
  }
53 
  [h] {
54 
    margin-top:40;
55 
    background:#fff;
56 
    border:10px solid #000;
57 
    border-radius:60px;
58 
    height:100;
59 
    width:150;
60 
  }
61 
  [ts] {
62 
    display:flex;
63 
    justify-content:center;
64 
    gap:5px;
65 
    >p{background:#fff;margin:0;width:15;height:20}
66 
  }
67 
</style>

I didn't attend this time due to the B4Y3RW4LD Hackathon. Micha hosted this time and I didn't manage to get this done to 100% within an hour later. Let's see whether I can fix it some other point in time.

Highlighted solution (2080 characters)
1 
<div f>
2 
<div h>
3 
  <div e l></div>
4 
  <div e r></div>
5 
</div>
6 
<div ts></div>
7 
</div>
8 
<style>
9 
  body{
10 
    background:#000;
11 
    display:grid;
12 
    place-content:center;
13 
  }
14 
  [e] {
15 
    background:#000;
16 
    position:absolute;
17 
    top:80;
18 
    left:29;
19 
    border-radius:50%;
20 
    rotate:150deg;
21 
    height:39;
22 
    width:50;
23 
  }
24 
  [l] {
25 
    left:90;
26 
    rotate:30deg;
27 
  }
28 
  [f] {
29 
    position:relative;
30 
    &:after,
31 
    &:before{
32 
      z-index:-1;
33 
      position:absolute;
34 
      left:-22;top:23;
35 
      content:'';
36 
      background:
37 
        radial-gradient(1q at 14q 136q,#fff 13q,#0000),
38 
        radial-gradient(1q at 26q 148q,#fff 13q,#0000),
39 
        linear-gradient(135deg,#000 32px,#0000 0 52px,#000 0)0 100q / 80px 80px no-repeat,
40 
        linear-gradient(45deg, #000 37px,#fff  0 67px,#000 0)0 100q / 80px 80px no-repeat,
41 
        radial-gradient(1q at 199q 14q,#fff 13q,#0000),
42 
        radial-gradient(1q at 211q 26q,#fff 13q,#0000),
43 
        linear-gradient(135deg,#000 25px,#0000 0 45px,#000 0)164q 10q / 80px 80px no-repeat,
44 
        linear-gradient(45deg, #000 52px,#fff  0 75px,#000 0)164q 10q / 80px 80px no-repeat,
45 
        radial-gradient(1q at 199q 148q,#fff 13q,#0000),
46 
        radial-gradient(1q at 211q 136q,#fff 13q,#0000),
47 
        linear-gradient(45deg, #000 46px,#0000 0 66px,#000 0)164q 100q / 80px 80px no-repeat,
48 
        linear-gradient(135deg,#000 31px,#fff  0 61px,#000 0)164q 100q / 80px 80px no-repeat,
49 
        radial-gradient(1q at 14q 26q,#fff 13q,#0000),
50 
        radial-gradient(1q at 26q 14q,#fff 13q,#0000),
51 
        linear-gradient(45deg, #000 46px,#0000 0 66px,#000 0)0 0 / 80px 80px no-repeat,
52 
        linear-gradient(135deg,#000 32px,#fff  0 52px,#000 0)0 0 / 80px 80px no-repeat,
53 
        #000
54 
      ;
55 
      height:300px;
56 
      width:300px;
57 
    }
58 
  }
59 
  [h] {
60 
    margin-top:40;
61 
    background:#fff;
62 
    border:10px solid #000;
63 
    border-radius:60px;
64 
    height:100;
65 
    width:150;
66 
  }
67 
  [ts] {
68 
    margin-left:57;
69 
    height:20;
70 
    width:57;
71 
    background:linear-gradient(90deg,#fff 15px,#000 0 20px,#fff 0 35px,#000 0 40px,#fff 0 55px,#000 0);
72 
  }
73 
</style>

Another solution, this time with gradients only. Didn't make it to 100% as well.

I got a tip from Tsaeko in the official Discord: "the only issue for me was a border-radius with a 4/5 ratio for the eyes (4in/5in or 20px/25px) with 62° or 63° rotation". I could make the eyes look better, but still only 99.9%. Probably the bones on the sides are missing something. I need to try it again at some point...!

< Back to Frontend Friday Folks Index