#101 - Sharingan.html

<div a>
  <div b />
  <div c />
  <div d />
  <div e />
  <div f />
</div>
<style>
  *{
    margin:0;
    background:#161616;
  }
  [a] {
    position: relative;
    top:50;
    left:100;
    border-radius:50%;
    border: 5px solid #000000;
    width: 190px;
    height: 190px;
    background: #A22015;
    overflow:hidden;
  }
  [b] {
    position: absolute;
    top: 50%; 
    right: 50%;
    transform: translate(50%,-50%);
    border-radius:50%;
    width: 70px;
    height: 70px;
    background: transparent;
    border: 15px solid #000000;
  }
  [c] {
    position: fixed;
    border-radius:50px;
    width: 50px;
    height: 50px;
    background: #000000;
    border: 10px solid #E96A23;
    top: 50%; 
    right: 50%;
    transform: translate(50%,-50%);
  }
  [d] {
    position: absolute;
    top: 60; 
    right: -25;
    border-radius:50%;
    width: 70px;
    height: 70px;
    background: transparent;
    border: 15px solid #000000;
  }
  [e] {
    position: absolute;
    top: -143; 
    right: -89;
    border-radius:50%;
    width: 70px;
    height: 70px;
    background: transparent;
    border: 15px solid #000000;
  }
  [f] {
    position: absolute;
    top: -15; 
    right: 133;
    border-radius:50%;
    width: 70px;
    height: 70px;
    background: transparent;
    border: 15px solid #000000;
  }
</style>