<div class="Wrapper">
  <div class='Logo Logo--one'>
    <div class='Logo-circle'></div>
  </div>

  <div class='Logo Logo--two'>
  </div>

</div>

$circle-size: 240px;
$flake-size: 26px;
$circle-color: #1D1F20;
$colors: #F1C40F, #F39C12, #2ECC71, #E74C3C, #3498DB;
$flake-count: 50;

body {
  background: $circle-color;
}

*, *::after, *::before { box-sizing: border-box; }

.Wrapper {
  display: flex;
  flex-wrap: wrap;
}

.Logo {
  width: $circle-size;
  height: $circle-size;
  margin: 50px auto;
  position: relative;
}

.Logo-circle {
  width: $circle-size - $flake-size;
  height: $circle-size - $flake-size; 
  border-radius: 50%;
  background: $circle-color;
  position: relative;
  top: $flake-size / 2;
  left: $flake-size / 2;
  z-index: 1;
}
  
.Logo-flakeWrapper {
  height: 100%;
  width: $flake-size;
  position: absolute;
  top: 0;
  left: ($circle-size - $flake-size) / 2;
  transform: translate3d(0,0,0);
}

.Logo-flake {
  width: $flake-size;
  height: $flake-size;
  border-radius: 50%;
}

@for $i from 1 through $flake-count {
  $rotation: random(360);
  $border: random(10);
  $opacity: random(10);
  $speed: 10 + 100/random(10);
  $color-key: random( length($colors) );
  $color: nth( $colors, $color-key );
  
  @keyframes flake-#{$i} {
    0% {
      transform: translate3d(0,0,0) rotate(#{$rotation}deg);
    }
    100% {
      transform: translate3d(0,0,0) rotate(#{$rotation + 360}deg);
    }
  }
  
  .Logo-flakeWrapper--#{$i} { 
    animation: flake-#{$i} #{$speed}s linear infinite;
    
    .Logo-flake {
      margin: #{$border}px;
      width: $flake-size - $border * 2;
      height: $flake-size - $border * 2;
      opacity: 0.4 + (0.6/$opacity);
      background-color: $color;
    }
  }
}

var html = '';
for (var i = 1; i <= 50; i ++) {
  html += '<div class="Logo-flakeWrapper Logo-flakeWrapper--'+i+'"><div class="Logo-flake"></div></div>';
}
document.querySelector('.Logo--one').innerHTML += html;
document.querySelector('.Logo--two').innerHTML += html;