-10.times do
  .circle
    -20.times do
      .dot
        %i

$circle-count: 10;
$dot-count: 20;
html,body{
  width: 100%;height: 100%;
}
body{
  background-color: #110c1d;
  overflow: hidden;
  margin:0;
  *{
    position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius:50%;
  }
}
.circle{ 
  width: 150px;height: 150px;
  @for $i from 0 through $circle-count{
    &:nth-child(#{$i}){
      transform: rotate($i * 360deg / $circle-count) translate(100px);
    }
  }  
  .dot{ 
    animation: 5s PlasmaBall linear infinite;
    i{
      height: 100px;
      border-right: 3px dashed transparent;
      border-left: 1.5px dashed transparent;
    }
    @for $i from 1 through $dot-count{
      &:nth-child(#{$i}){
        i{
          transform: rotate($i * 360deg / $dot-count) translate(100px);
          border-color: hsla(355 - $i * 50 / $dot-count,100%,50%,1);
        }
      }
    }
  }
}
@keyframes PlasmaBall{
  100%{
    transform: rotate(360deg);
  }
}

//pure css