CSS Battle #76 – Beeee

[Narigo]

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!

[Narigo]

Code Source – 601.17 {612}

<r>
<div w></div>
<div b></div>
</r>
<style>
  body{display:grid;place-items:center;background:#998235}
  div {
    width: 150px;
    height: 75px;
    background: #dd6b4d;
    border-radius:40px;
  }
  [w]{
    background:
      linear-gradient(#0000 50%,#fff 0),
      radial-gradient(circle at 25% 50%, #fff 38px, #0000 0),
      radial-gradient(circle at 75% 50%, #fff 38px, #0000 0)
  }
  [b]{
    background:
      radial-gradient(circle at 122px 28px, #191919 7.5px, #0000 0),
      linear-gradient(to right,#191919 25px,#EFF33C 0 35px,#191919 0 60px,#EFF33C 0 70px,#191919 0 95px,#EFF33C 0)
  }
</style>

A tiny bit smaller through changing background and forgot to remove initial color – 601.75 {570}

<r>
<div w></div>
<div b></div>
</r>
<style>
  body{display:grid;place-items:center;background:#998235}
  div {
    width:150;
    height:75;
    border-radius:40px
  }
  [w]{
    background:
      linear-gradient(#0000 50%,#fff 0),
      radial-gradient(circle at 25% 50%,#fff 38px,#0000 0),
      radial-gradient(circle at 75% 50%,#fff 38px,#0000 0)
  }
  [b]{
    background:
      linear-gradient(to right,#191919 25px,#0000 0 35px,#191919 0 60px,#0000 0 70px,#191919 0 95px,#0000 0),
      radial-gradient(circle at 122px 28px,#191919 7.5px,#EFF33C 0)
  }
</style>

[david-001]

Code Source – 596.52 {840} (99.9% match)

<div a></div>
<div b></div>
<div c></div>
<style>
  body{
    background: #998235;
    position: relative;
    margin: 0;
  }
  [a] {
    position: absolute;
    top: 150;
    left: 125;
    width: 150px;
    height: 75px;
    background: radial-gradient(circle at 122.5px 27.5px, #191919 8px, #0000 0),linear-gradient(to right, #191919 25px, #EFF33C 0 35px, #191919 0 60px, #EFF33C 0 70px, #191919 0 95px, #EFF33C 0);
    border-radius: 50px;
  }
  [b]{
    position: absolute;
    top: 75;
    left: 125;
    width: 150px;
    height: 75px;
    border-radius: 50px;
    background: radial-gradient(circle at 38px 38px, #FFFFFF 38px, #0000 0),radial-gradient(circle at 112px 38px, #FFFFFF 38px, #0000 0)
  }
  [c]{
    position: absolute;
    top: 120;
    left: 160;
    width: 70px;
    height: 30px;
    background: #FFFFFF
  }
</style>