CSS Battle #102

Battle: #102

<div class="head">
  <div class="eye"></div>
  <div class="eye e-r"></div>
</div>
<div class="tooth t1"></div>
<div class="tooth t2"></div>
<div class="tooth t3"></div>

<div class="l">
  <div class="dot"></div>
  <div class="dot d2"></div>
  <div class="dot d3"></div>
  <div class="dot d4"></div>
  <div class="bone1"></div>
  <div class="bone2"></div>
</div>
<div class="l r">
  <div class="dot"></div>
  <div class="dot d2"></div>
  <div class="dot d3"></div>
  <div class="dot d4"></div>
  <div class="bone1"></div>
  <div class="bone2"></div>
</div>

<style>
  body {
    margin: 0;
    background: #000000;
  }
  div {
    position: absolute;
  }
  .l {
    width: 50%;
    height: 100%;
  }
  .r {
    right: 0;
    transform: scaleX(-1);
  }
  .dot {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: #ffffff;
    top: 95px;
    left: 95px;
  }
  .d2 {
    top: 85px;
    left: 105px;
  }
  .d3 {
    top: 200px;
  }
  .d4 {
    top: 210px;
    left: 105px;
  }
  .bone1 {
    width: 20px;
    height: 15px;
    background: #ffffff;
    left: 115px;
    top: 108px;
    transform: rotate(-45deg);
  }
  .bone2 {
    width: 20px;
    height: 15px;
    background: #ffffff;
    left: 115px;
    bottom: 87px;
    transform: rotate(45deg);
  }
  .head {
    z-index: 9;
    transform: translateX(-50%);
    left: 50%;
    width: 150px;
    height: 100px;
    background: #ffffff;
    top: 100px;
    border-radius: 60px;
    border: 10px solid #000000;
  }
  .eye {
    width: 50px;
    height: 40px;
    background: #000000;
    border-radius: 100%;
    left: 20px;
    top: 30px;
    transform: rotate(-30deg);
  }
  .e-r {
    transform: rotate(30deg);
    left: 80px;
  }
  .tooth {
    width: 15px;
    height: 30px;
    background: #ffffff;
    bottom: 60px;
  }
  .t1 {
    left: 173px;
  }
  .t2 {
    left: 193px;
  }
  .t3 {
    left: 213px;
  }
</style>