Thoughts, Talks and Trials by Narigo

One Piece

Highlighted solution (1232 characters)

<div f>
<div h>
  <div e l></div>
  <div e r></div>
</div>
<div ts><p><p><p></div>
</div>
<style>
  body{
    background:#000;
    display:grid;
    place-content:center;
  }
  [e] {
    background:#000;
    position:absolute;
    top:80;
    left:29;
    border-radius:50%;
    rotate:150deg;
    height:39;
    width:50;
  }
  [l] {
    left:90;
    rotate:30deg;
  }
  [f] {
    position:relative;
    &:after,
    &:before{
      z-index:-1;
      position:absolute;
      left:-22;top:23;
      content:'';
      background:
        radial-gradient(1q at 14q 26q,#fff 13q,#0000),
        radial-gradient(1q at 26q 14q,#fff 13q,#0000),
        linear-gradient(45deg,#000 27q,#0000 0 48q,#000 0),
        linear-gradient(135deg,#000 25q,#fff 0 56q,#000 0),
        #000
      ;
      height:50;
      width:50;
      -webkit-box-reflect:right 120q;
    }
    &:after {
      left:-22;top:126;
      rotate:270deg;
      -webkit-box-reflect:below 120q;
    }
  }
  [h] {
    margin-top:40;
    background:#fff;
    border:10px solid #000;
    border-radius:60px;
    height:100;
    width:150;
  }
  [ts] {
    display:flex;
    justify-content:center;
    gap:5px;
    >p{background:#fff;margin:0;width:15;height:20}
  }
</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.

< Back to Frontend Friday Folks Index