<div class="bezier">
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle cx=50 cy=50 r="14"/></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;

.bezier {
  width: $proportion;
  height: $proportion;
}

.bezier svg {
  height: $proportion;
  position: absolute;
  width: $proportion;

  > * {
    fill: $fill;
  }
}

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

var bezier_path = [{ x: 0, y: 0 }, { x: 0, y: 32 }, { x: 32, y: 32 }, { x: 32, y: 0 }, { x: 0, y: 0 }];

tl.staggerTo($('.bezier > svg'), 0.9222, { bezier: {
  type: 'thru',
  values: bezier_path,
  curviness: 1
}, ease: Power1.easeInOut }, 0.0222);