<div class="attraction">
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="42"/></svg>
</div>

html,body{height:100%;}body{display:flex;align-items:center;justify-content:center;background:#1d1d1d;}svg{max-width:100%;}

// Required
// ====================================

$proportion: 30px;
$fill: #86CC01;

.attraction {
  width: $proportion;
  height: $proportion;
  transform: scale(.25) rotate(-90deg) translateY(-300%);
}

.attraction svg {
  > * {
    fill: $fill;
  }
}

@for $i from 1 through 13 {
  .attraction svg:nth-child(#{$i}) circle {
    opacity: $i / 100 * 6;
  }
}

var tl = new TimelineMax({
  repeat: -1
});

var bezier = [{ x: 0, y: 0, opacity: 0 }, { x: 0, y: 42, opacity: 0 }, { x: 42, y: 42, opacity: 1 }, { x: 42, y: 0, opacity: 1 }, { x: 0, y: 0, opacity: 0 }];

tl.staggerTo($('.attraction > svg'), 0.8, { bezier: {
  type: 'thru',
  values: bezier,
  curviness: 2
}, ease: Ease.easeInOut }, 0.09);