<div class="particle-wrapper">
    <div class="particle"></div>
    <div class="particle"><svg class="svg" xmlns="http://www.w3.org/2000/svg" x="0px"
   y="0px" viewBox="0 0 96.9 97.6">
<path d="M37.9,61.4c-3.8-0.2-7.1-1.6-9.9-4.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,5.1,2.9,7.7,3.1c2.6,0.2,5.2-0.6,7.8-2.6c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,41.6,61.4,37.9,61.4z"/>
<path d="M75,35.4c0.1,1-0.2,1.8-1.1,1.8c-2.4,0-3.2-1.9-4-3.8c-0.3-0.8,0.1-1.7,0.9-1.7C73.2,31.9,74.1,33.9,75,35.4z"/>
<path d="M55.4,33.5c-5.2,0-9.2,5.2-9.1,12c0.1,6.1,3.8,10.2,9.2,10.2c5.8,0,10-5,9.9-11.8C65.4,38.4,60.7,33.5,55.4,33.5z
   M55.7,52.2c-3.8-0.1-5.7-2.3-5.7-6.7c-0.1-5,2.3-8.6,5.6-8.6c3.5,0,6.3,3.2,6.4,7.4C61.9,49.4,59.7,52.2,55.7,52.2z"/>
<path d="M20,33.8c-5.8-0.1-10.2,4.5-10.2,10.5c0,6.6,4.3,11.4,10,11.4c5.6-0.1,9.1-4.1,9.1-10.4C28.9,38.2,25.6,33.9,20,33.8z
   M19.3,52.2c-3.8,0-5.9-2.8-6-7.6c0-4.4,2.8-7.7,6.7-7.6c3.3,0.1,5.1,2.9,5.2,7.8C25.3,49.8,23.3,52.2,19.3,52.2z"/>
<path d="M56.7,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C57.6,43.9,57,45.3,56.7,46.5z"/>
<path d="M20.1,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C20.9,43.9,20.4,45.3,20.1,46.5z"/>
<circle class="st0" cx="48.4" cy="48.9" r="45.7"/>
</svg></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"><svg class="svg" xmlns="http://www.w3.org/2000/svg" x="0px"
   y="0px" viewBox="0 0 96.9 97.6">
<path d="M37.9,61.4c-3.8-0.2-7.1-1.6-9.9-4.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,5.1,2.9,7.7,3.1c2.6,0.2,5.2-0.6,7.8-2.6c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,41.6,61.4,37.9,61.4z"/>
<path d="M75,35.4c0.1,1-0.2,1.8-1.1,1.8c-2.4,0-3.2-1.9-4-3.8c-0.3-0.8,0.1-1.7,0.9-1.7C73.2,31.9,74.1,33.9,75,35.4z"/>
<path d="M55.4,33.5c-5.2,0-9.2,5.2-9.1,12c0.1,6.1,3.8,10.2,9.2,10.2c5.8,0,10-5,9.9-11.8C65.4,38.4,60.7,33.5,55.4,33.5z
   M55.7,52.2c-3.8-0.1-5.7-2.3-5.7-6.7c-0.1-5,2.3-8.6,5.6-8.6c3.5,0,6.3,3.2,6.4,7.4C61.9,49.4,59.7,52.2,55.7,52.2z"/>
<path d="M20,33.8c-5.8-0.1-10.2,4.5-10.2,10.5c0,6.6,4.3,11.4,10,11.4c5.6-0.1,9.1-4.1,9.1-10.4C28.9,38.2,25.6,33.9,20,33.8z
   M19.3,52.2c-3.8,0-5.9-2.8-6-7.6c0-4.4,2.8-7.7,6.7-7.6c3.3,0.1,5.1,2.9,5.2,7.8C25.3,49.8,23.3,52.2,19.3,52.2z"/>
<path d="M56.7,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C57.6,43.9,57,45.3,56.7,46.5z"/>
<path d="M20.1,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C20.9,43.9,20.4,45.3,20.1,46.5z"/>
<circle class="st0" cx="48.4" cy="48.9" r="45.7"/>
</svg></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"><svg class="svg" xmlns="http://www.w3.org/2000/svg" x="0px"
   y="0px" viewBox="0 0 96.9 97.6">
<path d="M37.9,61.4c-3.8-0.2-7.1-1.6-9.9-4.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,5.1,2.9,7.7,3.1c2.6,0.2,5.2-0.6,7.8-2.6c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,41.6,61.4,37.9,61.4z"/>
<path d="M75,35.4c0.1,1-0.2,1.8-1.1,1.8c-2.4,0-3.2-1.9-4-3.8c-0.3-0.8,0.1-1.7,0.9-1.7C73.2,31.9,74.1,33.9,75,35.4z"/>
<path d="M55.4,33.5c-5.2,0-9.2,5.2-9.1,12c0.1,6.1,3.8,10.2,9.2,10.2c5.8,0,10-5,9.9-11.8C65.4,38.4,60.7,33.5,55.4,33.5z
   M55.7,52.2c-3.8-0.1-5.7-2.3-5.7-6.7c-0.1-5,2.3-8.6,5.6-8.6c3.5,0,6.3,3.2,6.4,7.4C61.9,49.4,59.7,52.2,55.7,52.2z"/>
<path d="M20,33.8c-5.8-0.1-10.2,4.5-10.2,10.5c0,6.6,4.3,11.4,10,11.4c5.6-0.1,9.1-4.1,9.1-10.4C28.9,38.2,25.6,33.9,20,33.8z
   M19.3,52.2c-3.8,0-5.9-2.8-6-7.6c0-4.4,2.8-7.7,6.7-7.6c3.3,0.1,5.1,2.9,5.2,7.8C25.3,49.8,23.3,52.2,19.3,52.2z"/>
<path d="M56.7,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C57.6,43.9,57,45.3,56.7,46.5z"/>
<path d="M20.1,46.5c-0.4,0.5-1,0.7-1.4,0.3c-1.1-1.2-0.6-2.5-0.1-3.7c0.2-0.5,0.9-0.8,1.3-0.3C20.9,43.9,20.4,45.3,20.1,46.5z"/>
<circle class="st0" cx="48.4" cy="48.9" r="45.7"/>
</svg></div>
    <div class="particle"></div>
    <div class="particle"></div>
</div>

body {
  background: #000;
}
.particle-wrapper{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.particle {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    border:3px solid #000;
  svg{
    .st0{
    fill:none;
    stroke:#fff;
    }
    path{
      stroke-opacity:1;
      stroke:#000;
      fill:#000;
      stroke-width:.5;
    }
  }
}

@for $i from 1 through 20 {
    @keyframes particle-animation-#{$i} {
        100% {
            transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
        }
    }
    
    .particle:nth-child(#{$i}){
        animation: particle-animation-#{$i} 50s infinite;
        animation-direction:alternate;
        $size: random(80) + 20 + px;
        height: $size;
        width: $size;
        animation-delay: -$i * .2s;
        transform: translate3d((random(120) * 1vw), (random(120) * 1vh), (random(100) * 1px));
    }
}