CSS Battle #79 – Tambourine

[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 – 600.02 {1030}

<div id=r>
  <div class="j a"></div>
  <div class="j b"></div>
  <div class="j c"></div>
  <div class="j d"></div>
  <div class="j e"></div>
</div>
<style>
  body {
    display: grid;
    place-items: center;
    background: #6592CF;
  }
  div {
    border-radius: 50%;
    background: #6592CF;
    box-sizing: border-box;
  }
  #r {
    position: relative;
    margin-top: 20px;
    width: 170px;
    height: 170px;
    background:
      radial-gradient(circle at 50% 185px,#6592CF 50px, #243D83 0 60px, #0000 0),
      radial-gradient(#0000 75px, #243D83 0 85px, #0000 0),
      radial-gradient(#6592CF 75px, #243D83 0 85px, #0000 0)
    ;
  }
  .j {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 10px solid #243D83;
    background: radial-gradient(#243D83 5px, #6592CF 0)
  }
  .a {
    left: -10px;
    top: 90px;
  }
  .b {
    left: -10px;
    top: 20px;
  }
  .c {
    left: 60px;
    top: -20px;
  }
  .d {
    right: -10px;
    top: 20px;
  }
  .e {
    right: -10px;
    top: 90px;
  }
</style>

[meg-gutshall]

[meg-gutshall]

[meg-gutshall]

I'm rusty – 600.07 {914}

<div drum>
  <div zil a></div>
  <div zil b></div>
  <div zil c></div>
  <div zil d></div>
  <div zil e></div>
  <div handle></div>
</div>
<style>
  body {
    background: #6592CF;
  }
  div {
    border-radius: 50%;
    border: 10px solid #243D83;
    position: absolute;
  }
  [drum] {
    width: 150;
    height: 150;
    top: 75;
    left: 115;
  }
  [handle] {
    background: 
      radial-gradient(#6592CF 50px, #0000 50px),
      conic-gradient(from -65grad, #243D83 130grad, #6592CF 130grad);
    border: none;
    width: 120;
    height: 120;
    top: 115;
    left: 15;
  }
  [zil] {
    z-index: 1;
    background: radial-gradient(#243D83 23%, #6592CF 23%);
    width: 30;
    height: 30;
  }
  [a] {
    top: -30;
    left: 50;
  }
  [b] {
    top: 10;
    left: 120;
  }
  [c] {
    top: 10;
    left: -20;
  }
  [d] {
    top: 80;
    left: -20;
  }
  [e] {
    top: 80;
    left: 120;
  }
</style>