<div class="l-wrapper">
    <svg viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      
      <symbol id="s--circle" viewBox="0 0 140 140">
        <circle r="10" cx="20" cy="20"></circle>
      </symbol>
      
      <symbol id="s--heart" viewBox="0 0 140 140">
        <path  d="m16.335,8.3327c5.60066,-14.64803 27.54336,0 0,18.83319c-27.54335,-18.83319 -5.60061,-33.48122 0,-18.83319z" transform="translate(7,2) rotate(-45, 20,20)"/>
      </symbol>
      
      <symbol id="s--trapez">
        <path  d="m0,33.50001l6.03125,-33.50001l20.10417,0l6.03125,33.50001l-32.16667,0z"
              transform="scale(.8) translate(7,2) rotate(-220, 20,20)"/>
      </symbol>
      
      <symbol id="s--star">
        <path  d="m0,17.31586l17.31594,0l5.35075,-17.31586l5.35077,17.31586l17.31586,0l-14.00877,10.70167l5.351,17.31581l-14.00886,-10.7019l-14.00889,10.7019l5.35102,-17.31581l-14.00883,-10.70167l0,0z"
              transform="scale(.8) translate(7,2) rotate(-220, 20,20)"/>
      </symbol>
      
      <symbol id="s--plus">
        <path  d="m0,9.37491l9.37491,-9.37491l9.95899,9.95902l9.95786,-9.95902l9.37491,9.37491l-9.95901,9.95899l9.95901,9.95786l-9.37491,9.37491l-9.95786,-9.95901l-9.95899,9.95901l-9.37491,-9.37491l9.95902,-9.95786l-9.95902,-9.95899z"
              transform="scale(.8) translate(7,5) rotate(-45, 20,20)"/>
      </symbol>
      
      <g class="g-circles g-circles--ams">
        <g class="g--circle">
          <use xlink:href="#s--plus" class="u--circle"/>
        </g>  
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--plus" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--plus" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--plus" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--plus" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--plus" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
      </g>
  </svg>
  
  <svg viewBox="0 0 150 150">
      <g class="g-circles g-circles--hc">
        <g class="g--circle">
          <use xlink:href="#s--circle" class="u--circle"/>
        </g>  
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--circle" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--circle" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--circle" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--circle" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--circle" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--heart" class="u--circle"/>
        </g>
      </g>
  </svg>
  
  <svg viewBox="0 0 150 150">
      <g class="g-circles g-circles--trapez">
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>  
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--trapez" class="u--circle"/>
        </g>
  </svg>
  
  <svg viewBox="0 0 150 150">
      <g class="g-circles g-circles--stars">
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>  
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
        <g class="g--circle">
          <use xlink:href="#s--star" class="u--circle"/>
        </g>
      </g>
  </svg>
</div>

$max: 12;
$angle: 360/$max;
$size: 150px;
$wh: 130px;
$fill: crimson;

BODY {
  background: 
    linear-gradient(45deg, 
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,.05) 50%, 
      rgba(255,255,255,0) 52%),
  linear-gradient(-45deg, 
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,.05) 50%, 
      rgba(255,255,255,0) 52%);
  background-size: 1em 1em;
  background-color: #000;
  }

.l-wrapper {
  position: absolute;
  width: $wh*4;
  height: $wh*2.3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
  }

svg {
  height: $wh;
  width: $wh;
  margin: 0 2em 2em;
  overflow: visible;
/*   border: 1px solid red; */
  }
.g-circles {
  //transform: scale(.9) translate(7px, 7px);
  }

@function transform($item: 1){
  $base: rotate(#{-$angle*$item}deg) translate(5px, 5px) scale(.9);
  @return $base;
}

.g--circle {
  transform-origin: $size/2 $size/2;
  
  fill: $fill;
  animation: opacity 1.2s linear infinite;
  
  @for $item from 1 through $max {
    &:nth-child(#{$max}n + #{$item}){
      animation-delay: -#{$item/10}s;
      transform: transform($item);
    }
  }
}

.g-circles--ams .g--circle {
  fill-opacity: 0;
  animation-name: opacity;
  }

.g-circles--hc .g--circle {
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1;
  stroke: yellowgreen;
  animation-name: opacity-stroke, colors, colors-stroke;
  .u--circle {
    animation: transform-2 1.2s linear infinite;
  }
}

.g-circles--hc {
  transform: scale(.85) translate(12px, 12px);
  .g--circle {
    @for $item from 1 through $max {
      &:nth-child(#{$max}n + #{$item}) .u--circle{
        animation-delay: -#{$item/10}s;
      }
    }
  }
}

.g-circles--trapez .g--circle {
  fill-opacity: 1;
  animation-name: opacity, colors;
  }

.g-circles--stars {
  transform: scale(.9) translate(12px, 12px);
  .g--circle {
    fill-opacity: 1;
    fill: orange;
    animation-name: opacity, colors-3;
  }
  .u--circle {
    animation: transform 1.2s linear infinite;
  }
}

.g-circles--stars .g--circle {
  @for $item from 1 through $max {
    &:nth-child(#{$max}n + #{$item}) .u--circle{
      animation-delay: -#{$item/10}s;
    }
  }
}


@keyframes opacity {
  3% {
    fill-opacity: 1;
  }
  75% {
    fill-opacity: 0;
  }
  
}

@keyframes opacity-stroke {
  10% {
    stroke-opacity: 1;
  }
  85% {
    stroke-opacity: 0;
  }
  
}

@keyframes colors {
  0% {
    fill: yellowgreen;
    }
  10% {
    fill: gold;
    }
  75% {
    fill: crimson;
  }
}

@keyframes colors-stroke {
  0% {
    stroke: yellowgreen;
    }
  10% {
    stroke: gold;
    }
  75% {
    stroke: crimson;
  }
}

@keyframes colors-2 {
  0% {
    fill: yellow;
    }
  50% {
    fill: red;
    }
  65% {
    fill: orangered;
  }
  95% {
    fill: gold;
  }
}

@keyframes colors-3 {
  0% {
    fill: yellowgreen;
    }
  50% {
    fill: turquoise;
    }
  65% {
    fill: yellow;
  }
  95% {
    fill: orange;
  }
}

@keyframes transform {
  10% {
    transform-origin: 50px 50px;
    transform: scale(.85);
    }
}

@keyframes transform-2 {
  40% {
    transform: scale(.85) translate(-10px,-10px);
    }
  60% {
    stroke-width: 15;
    }
}