CSS Battle #103 – Super Saiyan

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

[Persevere-Wakulla]

Code Source – score {characters}

<div id="hair">
  <span class='hair'></span>
  <span class='hair'></span>
  <span class='hair'></span>
  <span class='hair'></span>
  <span class='hair'></span>
</div>
  <div class='face'>
      <div class='mouth'></div>
  </div>  
<style>
  
  body{
    margin:0;
    padding:0;
    display: grid;
    place-items:center;
    background-color: #161616;
  }
  #hair {
      position: relative;
      top:51px;
      left:10px;
  }
  
    .hair{
        position: absolute;
        display: inline-block;
        width:65px;
        height: 59px;
        background-color:#EBAE11;
        border-radius: 50%;
        background: linear-gradient(to right, #EBAE11 50%, #1600 50%);
    }

    .hair:nth-of-type(1){
      rotate: -30deg;
      top:2px;
      right: -7px;
      z-index:1;
    }
    .hair:nth-of-type(2){
      rotate: 210deg;
      top:2px;
      left: -27px;
      z-index: 1;
    }
    .hair:nth-of-type(3){
      width:60px;
      height:60px;
      background: #EBAE11;
      border-radius: 0px 90px 0px 90px;
      left:-40px;
      bottom: -45px;
      rotate: 45deg;
      z-index:1;
    }
    .hair:nth-of-type(4){
      z-index: -1;
      top:20px;
      left:-75px;
      rotate:-80deg
    }
    .hair:nth-of-type(5){
      z-index: -1;
      top:20px;
      left:-10px;
      rotate:260deg;
    }
  
  .face {
    width: 80px;
    height: 60px;
    background: linear-gradient(to right, #FFF 50%, #FFDEB9 50%);
    border-radius: 0 0 150px 150px ;
    position:relative;
    top: -24px;
  }
  .mouth {
      width:20px;
      height:10px;
      background-color: #161616;
      position: absolute;
      top:66%;
      left:50%;
      border-radius:0 0 50px 50px;
      transform: translateX(-50%)
  }
</style>

Score: 590.72

Char: 1737

[Narigo]

Code Source – 600 {1256}

<style>
  &{background:
    /* mouth */
    radial-gradient(1q at 50% 0, #161616 10px, #0000 0) 0 196px,
    /* top hair */
    radial-gradient(1q at -42px 126px,#EBAE11 60px,#0000 0) 200px 0 / 200px no-repeat,
    radial-gradient(1q at 242px 126px,#EBAE11 60px,#0000 0) 0 0 / 200px no-repeat,
    /* mid hair */
    conic-gradient(#161616 30deg,#0000 0 330deg, #161616 0) 0 18px,
    radial-gradient(1q,#EBAE11 30px,#0000 0) -15px -8px,
    radial-gradient(1q,#EBAE11 30px,#0000 0) 15px -8px,
    /* face */
    linear-gradient(to right,#fff 50%,#FFDEB9 0) 50% calc(50%) / 80px 50px no-repeat,
    radial-gradient(1q at 0% calc(50% - 23px),#FFDEB9 40px,#0000 0) calc(50% + 20px) calc(50% + 49px) / 40px 60px no-repeat,
    radial-gradient(1q at 100% calc(50% - 23px),#fff 40px,#0000 0) calc(50% - 20px) calc(50% + 49px) / 40px 60px no-repeat,
    /* back hair left */
    linear-gradient(193deg,#161616 50%,#0000 0) calc(50% - 30px) calc(50% + 9px) / 59px 61px no-repeat,
    radial-gradient(1q,#EBAE11 28px,#0000 0) -31px 11px,
    /* back hair right */
    linear-gradient(calc(360deg - 193deg),#161616 50%,#0000 0) calc(50% + 30px) calc(50% + 9px) / 59px 61px no-repeat,
    radial-gradient(1q,#EBAE11 28px,#0000 0) 31px 11px,
    #161616
   }
</style>