.container
  - for i in (1..30)
    .circle.blue
    
  - for j in (1..30)
    .circle.purple

$circleNumber: 60;

html, body, .container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  
}

.container {
  animation: pulse 10s ease infinite;
  background: #009688;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0.15;
  visibility:hidden;
  transform-origin: -1% -1%;
}

.blue {
  background: #00BCD4;
}
.purple {
  background: #512DA8;
}

@for $i from 1 through $circleNumber {
  .blue:nth-child(#{$i}) {
    width : 20px * $i;
    height: 20px * $i;
    animation: rotate 2s linear infinite #{$i/5}s;
  }
  .purple:nth-child(#{$circleNumber/2 + $i}) {
    width : 20px * $i;
    height: 20px * $i;
    animation: rotate 2s linear infinite #{$i/10}s;

  }
}

@keyframes rotate {
  0% {
    visibility: visible;
    transform: rotate(0);
  }
  100% {
    transform : rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
  }
  50% {
    transform: scale(2);
  }
}