< Back to Frontend Friday Folks Index

One Piece

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