CSS Battle #136 – Alien Eye

[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 – 631.4 {267}

<div></div>
<style>
  &{
    background:
      radial-gradient(1q at 210px,#998235 30px,#0000),
      radial-gradient(1q,#FCBE5C 50px,#0000),
      radial-gradient(1q at 210px,#0B2429 70px,#0000),
      radial-gradient(1q,#FCBE5C 90px,#0000),
      #998235
    ;
  }

[missatrox44]

Code Source – score 600.32 {748} Absolutely positioned circles!

<div class="outer lt-yellow">
  <div class="blue"></div>
  <div class="md lt-yellow"></div>
  <div class="sm dk-yellow"></div>
</div>
<style>
  html {
    background: #998235;
  }

body {
    display: flex;
    justify-content:center;
    align-items: center;
  }

  div {
    border-radius: 50%;
    position: absolute;
  }
  
  .dk-yellow{
    background: #998235;
  }

  .lt-yellow {
    background: #FCBE5C;
  }
  
  .outer {
    width: 180px;
    height: 180px;
  }

  .blue {
    background: #0B2429;
    height: 140px;
    width: 140px;
    top: 20px;
    left: 30px;
  }

  .md {
    height: 100px;
    width: 100px;
    top: 40px;
    left: 40px;
  }

  .sm {
    height: 60px;
    width: 60px;
    top: 60px;
    left: 70px;
  }
</style>

[Arvind644]

Code Source – 600.77 {656}

<div></div>
<div f></div>
<div s></div>
<div t></div>
<style>
  body {
    background: #998235;
    display: grid;
    place-content: center;
    margin: 0;
  }
  div {
    position: absolute;
    width: 60;
    height: 60;
    background: #998235;
    border-radius: 50%;
    translate: 180px 120px;
  }
  [f] {
    width: 100;
    height: 100;
    background: #FCBE5C;
    translate: 150px 100px;
    z-index: -2;
  }
  [s] {
    width: 140;
    height: 140;
    background: #0B2429;
    translate: 140px 80px;
    z-index: -3;
  }
  [t] {
    width: 180;
    height: 180;
    background: #FCBE5C;
    translate: 110px 60px;
    z-index: -4;
  }
</style>

[Arvind644]

Optimized solution without z index – 601.94 {559}

<div t></div>
<div s></div>
<div f></div>
<div></div>
<style>
  body {
    background: #998235;
    margin: 0;
  }
  div {
    position: absolute;
    width: 60;
    height: 60;
    background: #998235;
    border-radius: 50%;
    translate: 180px 120px;
  }
  [f] {
    width: 100;
    height: 100;
    background: #FCBE5C;
    translate: 150px 100px;
  }
  [s] {
    width: 140;
    height: 140;
    background: #0B2429;
    translate: 140px 80px;
  }
  [t] {
    width: 180;
    height: 180;
    background: #FCBE5C;
    translate: 110px 60px;
  }
</style>