Get simple animation with compass and gem animation

scss-animation

//https://github.com/ericam/compass-animation

@import "animation";

#circle {
  width: 50px;
  height: 50px;
  background: none;
  border-radius: 50%;
  box-shadow: rgba(255,255,255,0.2) 160px 335px,rgba(255,255,255,0.2) 120px 275px 0 12px,rgba(255,255,255,0.2) 60px 355px 0 23px,rgba(255,255,255,0.2) 230px 445px 0 -8px,rgba(255,255,255,0.2) 60px 125px,rgba(255,255,255,0.2) 260px 145px 0 12px,rgba(255,255,255,0.2) 300px 145px 0 23px,rgba(255,255,255,0.2) 100px 85px 0 -8px,rgba(255,255,255,0.2) 50px 155px,rgba(255,255,255,0.2) 150px 273px 0 -2px,rgba(255,255,255,0.2) 50px 555px 0 23px,rgba(255,255,255,0.2) 180px 5px 0 -8px;
  @include animation(circle 30s ease infinite alternate);
 
}

@include keyframes(circle) {
  0%{
    box-shadow: rgba(255,255,255,0.2) 160px 335px,rgba(255,255,255,0.2) 120px 275px 0 12px,rgba(255,255,255,0.2) 60px 355px 0 23px,rgba(255,255,255,0.2) 230px 445px 0 -8px,rgba(255,255,255,0.2) 60px 125px,rgba(255,255,255,0.2) 260px 145px 0 12px,rgba(255,255,255,0.2) 300px 145px 0 23px,rgba(255,255,255,0.2) 100px 85px 0 -8px,rgba(255,255,255,0.2) 350px 555px,rgba(255,255,255,0.2) 350px 273px 0 -2px,rgba(255,255,255,0.2) 150px 355px 0 23px,rgba(255,255,255,0.2) 180px 205px 0 -8px,rgba(255,255,255,0.2) 0px 0px 0 -8px,rgba(255,255,255,0.2) 100px 555px 0 10px;
  }
  100%{
    box-shadow: rgba(255,255,255,0.2) 70px 10px,rgba(255,255,255,0.2) 300px 205px 0 12px,rgba(255,255,255,0.2) 0px 155px 0 23px,rgba(255,255,255,0.2) 330px 45px 0 -8px,rgba(255,255,255,0.2) 460px 325px,rgba(255,255,255,0.2) 0px 445px 0 12px,rgba(255,255,255,0.2) 300px 145px 0 23px,rgba(255,255,255,0.2) 100px 85px 0 -8px,rgba(255,255,255,0.2) 50px 155px,rgba(255,255,255,0.2) 150px 273px 0 -2px,rgba(255,255,255,0.2) 0px 555px 0 23px,rgba(255,255,255,0.2) 180px 5px 0 -8px,rgba(255,255,255,0.2) 300px 555px 0 -8px,rgba(255,255,255,0.2) 350px 355px 0 10px;
  }
}