- var n = 1;
.siri
  .circle-wrapper
     while n < 8
      .circle(class="c" + n++)

$color1: #8F40AD;
$color2: #DB7CFF;
$color3: #15A9FD;
$color4: #15EFFD;
$color5: #DB7CFF;
$color6: #8F40AD;
$color7: #15EFFD;

.siri {
  border-radius: 50%;
  width: 60vh;
  height: 60vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  box-sizing: border-box;
  &:before{
        content: '';
    width: 120%;
    height: 100%;
    border-radius: 50%;
    top: 30%;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    left: -10%;
    right: 0;
    z-index: 1;
    
  }
  .circle-wrapper {
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -10%;
    top: -10%;
    filter: blur(120px);
    animation: rotate 10s linear infinite;
  }
  .circle {
    border-radius: 50%;
    position: absolute;
    // animation-name: rotate;
    // animation-timing-function: linear;
    // animation-iteration-count: infinite;
    // animation: rotate 1s linear infinite;
    &.c1 {
      background-color: $color1;
      top: 0;
      left: 0;
      width: 50%;
      height: 50%;
      animation: rotate 3s linear infinite;
      transform-origin: bottom right;
    }
    &.c2 {
      background-color: $color2;
      top: 0;
      right: 0;
      width: 60%;
      height: 60%;
      animation: rotate 6s linear infinite;
      transform-origin: bottom left;
    }
    &.c3 {
      background-color: $color3;
      bottom: 0;
      left: 50%;
      width: 40%;
      height: 40%;
      animation: rotate 7s linear infinite;
      transform-origin: top left;
    }
    &.c4 {
      background-color: $color4;
      bottom: 0;
      left: 0;
      width: 60%;
      height: 60%;
      animation: rotate 12s linear infinite;
      transform-origin: bottom left;
    }
    &.c5 {
      background-color: $color5;
      top: 0;
      left: 50%;
      width: 50%;
      height: 50%;
      animation: rotate 7s linear infinite;
      transform-origin: bottom right;
    }
    &.c6 {
      background-color: $color6;
      top: 0;
      left: 0;
      width: 50%;
      height: 50%;
      animation: rotate 3s linear infinite;
      transform-origin: bottom left;
    }
    &.c7 {
      background-color: $color7;
      bottom: 0;
      left: 0;
      width: 40%;
      height: 40%;
      animation: rotate 4s linear infinite;
      transform-origin: top left;
    }
  }
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
}