$red: #dd4a38;
$yellow: #ecb936;
$orange: #e47600;
$green: #26ae90;
$blue: #256cd4;

svg {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

#sparkle {
  
  path {
    stroke: transparent;
    stroke-dasharray: 300;
	  opacity: 0;
  }
  
  #Stroke-1 {
    stroke: $red;
    @include animation(circle 5000ms 1000ms infinite ease-out);
  }
  
  #Stroke-2 {
    stroke: $yellow;
    @include animation(circle 4500ms 500ms infinite ease-out);
  	stroke-dasharray: 220;
  }
  
  #Stroke-3 {
    stroke: $blue;
    @include animation(circle 5000ms 1300ms infinite ease-out);
  }
  
  #Stroke-4 {
    stroke: $red;
    @include animation(circle 6500ms 1600ms infinite ease-out);
  }
  
  #Stroke-7 {
    stroke: $blue;
    @include animation(circle 5500ms 100ms infinite ease-out);
  }
  
  #Stroke-8 {
    stroke: $orange;
    @include animation(circle 6100ms 800ms infinite ease-out);
  }

  
  #Stroke-9 {
    stroke: $yellow;
    @include animation(circle 6200ms 00ms infinite ease-out);
  }
  
}



@include keyframes(circle) {
  0% {
    stroke-dashoffset: 300;
    opacity: 0;
    /*stroke: $red;*/
  }
  
  10% {
    opacity: 1;
   /* stroke: $yellow;*/
  }
  
/*  15% {
    stroke: $green;
  }
  
  20% {
    stroke: $blue;
  }
  
  25% {
    stroke: $red;
  }*/

  
  30% {
    stroke-dashoffset: 700;
    opacity: 0;
  }
 
  
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}