div
  ol
    - for (var x = 0; x < 60; x++)
      li 
        <svg viewBox="0 0 250 250" x="0px" y="0px" width="250px" height="250px"><path d="M 125 1 L 199 226 L 6 87 L 244 87 L 52 227 L 125 1 Z"/></svg>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  color:#fff;
}
div{
  margin:0 auto;
  width:250px;
  height:250px;
  ol{
    list-style:none;
    position:relative;
    li{
      position:absolute;
      stroke-dasharray:0 1200;
      svg{
        animation:rotate 20s linear infinite;
        path{
          fill:none;
          stroke:#333;
        }
      }
    }
  }
}
@for $i from 0 to 60{
  li:nth-child(#{$i + 1}){
    transform:rotate(#{$i * 6}deg);
    animation:star 0.5s ease-out #{$i / 2 + 0.5}s 1 forwards;
    path{
      opacity:#{($i + 1) / 10};
    }
  }
}
@keyframes rotate{
  0% {transform:rotateZ(0turn)rotateX(0turn)rotateY(0turn);}
  100% {transform:rotateZ(1turn)rotateX(2turn)rotateY(1turn);}
}
@keyframes star{
  0%{stroke-dasharray:0 1250;}
  99.9%,to{stroke-dasharray:1250 1250;}
}