$height : 50vh;
$width : 2px;

$items : 40;
$turn : 50deg;

.body_wrap
{
  position:absolute;
  top:100px;
  -webkit-transition: all ease 16s; 
}

figure 
{
  position: relative;
  width: $width;
  height: $width;
  -webkit-animation:illusion ease 16s infinite;
  transform-style: preserve-3d;
  transform-origin: right center;
}

@-webkit-keyframes illusion
  {
     0% {   -webkit-transform: scale(0);   }
    
   50% {   -webkit-transform: scale(0.5);      }
    
    100%{-webkit-transform: scale(0);}
      }
 

.wrapper 
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: $width;
  height: $width;
  
  @for $i from 1 through $items {
    &:nth-child(#{$i}) {
      transform: 
        rotate($i*(360deg/$items)) ;
      color: hsl($i*(360deg/$items),100%,50%);
    }
  }
}

.rod {
  width: $width;
  height: $height;
  transform-origin: center 25%;
  background: currentColor;
  border-radius: $width;
  border-radius: 50%;
  -webkit-animation:barillusion ease 16s infinite;
  position:relative;
}

@-webkit-keyframes barillusion 
{
  0%{height:0vh;}
  25%{height:40vh;}
  50%{height:0vh;}
  100%{height:40vh;}
}

.rod::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: #FFF;
border-radius: 50%;
left: 90px;
}

.rod::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #FFF;
border-radius: 0%;
left: -190px;
  top:-3px;
 
}






html, body { height: 100%; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  overflow: hidden;
}