CSS Battle #102 – One Piece

[michaella23]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source – <strong>score {characters}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {characters}

your cssbattles code here!

[michaella23]

Micha all the characters 595.41 {1396}

<div id="head">
  <p l></p>
  <p r></p>
</div>
<div id="mouth"></div>
<div a>
  <p o>
  <p t>
  <p h>
</div>
<div b>
  <p o>
  <p t>
  <p h>
</div>
<div c>
  <p o>
  <p t>
  <p h>
</div> 
<div d>
  <p o>
  <p t>
  <p h>
</div>
<style>
  body {
    background: #000;
    margin: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #head {
    width: 150px;
    height: 100px;
    background: #FFFFFF;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .65em;
  }
 [l],[r] {
    width: 50px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    rotate: -30deg
  }
  [r] {
    rotate: 30deg
  }
  #mouth {
    margin-top: 10px;
    width: 54.5px;
    height: 20px;
    background: repeating-linear-gradient(90deg, #fff, #fff 15px, #000 1px, #000 20px)
  }
div {
  position: relative;
  width: 50px;
  height: 50px;
}
[a] {
  top: -154;
  left: -80;
  rotate: -42deg
}
[b] {
  top: -204;
  left: 80;
  rotate: 42deg;
}
[c] {
  top: -156;
  left: -80;
  rotate: 220deg;
}
[d] {
  top: -206;
  left: 80;
  rotate: -219deg
}
[o], [t], [h] {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 50%;
}
[o],[t] {
  left: 5;
  top: -15px;
}
[t] {
  left: 20
}
[h] {
  width: 22px;
  border-radius: 0;
  top: -2;
  left: 14;
}
</style>

[michaella23]

Micha, slightly fewer characters – 596.34 {927}

<div id="head"><p l></p><p r></p></div><div id="mouth"></div><div a><p o><p t><p h></div><div b><p o><p t><p h></div><div c><p o><p t><p h></div><div d><p o><p t><p h></div><style>body{background:#000;margin:110;flex-direction:column}body,#head{display:flex;justify-content:center;align-items:center}#head{width:150;height:100;background:#FFF;border-radius:60px;gap:.65em}[l],[r]{width:50;height:40;background:#000;border-radius:50%;rotate:-30deg}[r]{rotate:30deg}#mouth{margin-top:10;width:54.5;height:20;background:repeating-linear-gradient(90deg,#fff,#fff 16q,#000 1q,#000 21.1q)}div{position:relative;width:50;height:50}[a]{top:-154;left:-80;rotate:-42deg}[b]{top:-204;left:80;rotate:42deg}[c]{top:-156;left:-80;rotate:220deg}[d]{top:-206;left:80;rotate:-219deg}[o],[t],[h]{position:absolute;width:25;height:25;background:#fff;border-radius:50%}[o],[t]{left:5;top:-15}[t]{left:20}[h]{width:22;border-radius:0;top:-2;left:14