body {
  background: #ccc;
}
.w {
  position: absolute; 
  top: 30px; left: calc(50% - 150px);
  width: 320px; height: 320px;
  transform-origin: 50.5%;
}
.w:nth-child(2) {
  transform: scaleX(-0.8) scaleY(0.8);
}
.w:nth-child(3) {
  transform: scale(0.65);
}
.w:nth-child(4) {
  transform: scaleX(-0.5) scaleY(0.5);
}
.c {
  background: white;
  position: absolute; 
  top: 0; left: calc(50% - 7px);
  width: 14px; height: 10px;
  transform-origin: 50% 160px;
  transition: background 1s;
}

body:hover .c {
  background: red;
  box-shadow: inset 0 0 0 #fff;  
}

.c:nth-child(4n){  
  box-shadow: inset 0 0 4px #333;
}
.c:nth-child(4n+1){
  box-shadow: inset 0 6px 4px #333;
}
.c:nth-child(4n+2){
  background: #333;
  box-shadow: inset 0 0 4px #fff;
}
.c:nth-child(4n+3){
  box-shadow: inset 0 -6px 4px #333;
}

@for $i from 1 through 72 {
  .c:nth-child(#{$i}){
    transform: rotate(#{$i*5}deg);
  }
}