CSS Battle #95 – Pokeball

[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]

I've done this one in the official CSSBattle.dev Discord today and explained how gradients work over there. These are the two solutions we came up with:

Code Source – 614.37 {349}

<style>
  &{
    background:
      radial-gradient(circle, #F6DF96 25px, #781728 0 35px, transparent 0),
      linear-gradient(to right, #6CB3A9 110px, #781728 0 290px, #6CB3A9 0) 0 50% / 100% 20px no-repeat,
      radial-gradient(circle, transparent 100px, #6CB3A9 0),
      conic-gradient(#D25B70 25%, #FFFFFF 0 75%, #D25B70 0)
    ;
  }
</style>

Explaining transparency with different layer stacking – 609.72 {390}

<style>
  body{
    background:
      linear-gradient(to right, #6CB3A9 110px, #781728 0 170px, transparent 0 230px, #781728 0 290px, #6CB3A9 0) 0 50% / 100% 20px no-repeat,
      radial-gradient(circle, #F6DF96 25px, #781728 0 35px, transparent 0),
      radial-gradient(circle, transparent 100px, #6CB3A9 0),
      conic-gradient(#D25B70 25%, #FFFFFF 0 75%, #D25B70 0)
    ;
  }
</style>