Cacher is the code snippet organizer for pro developers

body{
  text-align:center;
  background:#E7E7E7;
}
@keyframes updown{
  50%{
    transform:translateY(1em) rotate(45deg);
  }
}
@keyframes littlebig{
  50%{
    transform:scale(1);
  }
}
.eyepointer{
  display:inline-block;
  animation:updown 2s infinite;
  border-radius:5em 5em
    2em 5em;
  width:10em;
  position:relative;
  height:10em;
  transform:rotate(45deg);
  background:#FF931F;
  box-sizing: border-box;

  .inner{
    box-sizing: border-box;
    position:absolute;
    top:1em;
    left:1em;
    background:#666;
    width:8em;
    border-radius:4em;
    height:8em;
    border:solid #E7E7E7 0.75em;
    .innerInner{
      background:#000;
      border-radius:50%;
      top:1.25em;
      left:1.25em;
      position:absolute;
      width:4em;
      height:4em;
      &:after{
        content:'';
        display:block;
        background:white;
        width:1.5em;
        border-radius:1em;
        position:absolute;
        top:1.25em;
        left:-0.25em;
        height:1.5em;
      }
    }
  }
  z-index:100;
}
.shadow{

  transform:scale(0.5);
  animation:littlebig 2s infinite;
  display:inline-block;
  background:#B2B2B2;
  width:7.5em;
  margin-top:1.7071067811865475em;
  height:2em;
  border-radius:50%;
}
.info{
  font-family:cursive,sans-serif;
  a{
  color:#FF931F;
  }
}

<div class="eyepointer">
  <div class="inner">
    <div class="innerInner"></div>
  </div>
  
</div><br />
<div class="shadow"></div>
<br />
<div class="info">
  inspired by <a href="https://dribbble.com/shots/1579938-Eye-Location?list=users&offset=1" target="_blank">this</a> shot by <a href="https://dribbble.com/vannelope"target="_blank">vannelope </a>
</div>