CSS Battle #101 – Sharingan

[meg-gutshall]

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!

[meg-gutshall]

First attempt – 600.19 {805}

<div class="container">
  <div class="ring a"></div>
  <div class="ring b"></div>
  <div class="inner"></div>
  <div class="ring c"></div>
</div>
<style>
  * {
    background: var(--b, #161616);
    border-radius: 50%;
  }
  body, body > div {
    display: grid;
    place-items: center;
  }
  .container {
    width: 190;
    height: 190;
    --b: #A22015;
    border: solid 5px #000;
    clip-path: circle(50%);
  }
  .inner {
    width: 50;
    height: 50;
    --b: #000;
    border: solid 10px #E96A23;
    outline: solid 15px #000;
    position: relative;
    top: -140;
  }
  .ring {
    width: 70;
    height: 70;
    --b: #0000;
    border: solid 15px #000;
    position: relative;
  }
  .a {
    left: -74;
    top: 2;
  }
  .b {
    left: 74;
    top: -97;
  }
  .c {
    top: -140;
  }
</style>

[surajb0710]

Code Source – 558.42{759}

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<style>
&{
background-image: radial-gradient(circle, #161616 25px,0, #E96A23 35px, 0, #000000 50px, 0, #A22015 95px, 0, #161616, 0, #000000 99px,0, #161616);
}
#a,#b,#c,#d{
width:100vw;
height:100vh;
position:absolute;
}

#a{
background-image: radial-gradient(circle  at 48% 75.7%, #0000 35px,0, #000000 50px,0, #0000 40px);
}
#b{
background-image: radial-gradient(circle  at 50% 82%, #0000 35px,0, #000000 50px,0, #0000 40px);
transform: rotate(122deg);
}
#c{
background-image: radial-gradient(circle  at 52% 77.5%, #0000 35px,0, #000000 50px,0, #0000 40px);
transform: rotate(-122deg);
}
#d{
background-image: radial-gradient(circle at 48% 47%, #0000 99px,0, #161616);
}
</style>

[madefromjames]

Code Source – score {284.24 {899}}

<div id='a'></div>
<div id='b'></div>
<div id='c'></div>
<style>
  body {
    background: #161616;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  #a,
  #b,
  #c {
    position: absolute;
    border-radius: 50%;
  }

  #a {
    width: 200px;
    height: 200px;
    background: #A22015;
    border: 10px solid #000000;
  }

  #b {
    width: 100px;
    height: 100px;
    background: #161616;
    border: 10px solid #E96A23;
  }

  #c {
    width: 40px;
    height: 40px;
    background: #000000;
  }
</style>