- 500.times do
  .particle

html {
  background-color: #222;
  overflow: hidden;
}

.particle {
  $d: 2vw;

  animation: shoot 3s ease-out infinite;
  animation-name: shoot, fade;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: absolute;
  width: $d;
  height: $d;

  @for $i from 0 to 400 {
    $t: (1 + .05*random(200))*1s;

    &:nth-child(#{$i + 1}) {
      animation-delay: -.01*random(100)*$t;
      background-color: hsl(random(360), 100%, 70%);
      transform: 
        translate(random(100)*1vw, random(100)*1vh) 
        rotate(45deg);
    }

  }
}

@keyframes shoot {
  0% {
    transform: translate(50vw, 50vh);
  }
}

@keyframes fade {
  to {
    opacity: 0;
  }
}