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

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

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

  > * {
    fill: $fill;
  }
}
View Compiled
var fctl = new TimelineMax({
  repeat: -1,
  yoyo: true
});

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

fctl.staggerTo($('.frcurv > svg'), 0.9222, { bezier: {
  type: 'thru',
  values: fcbezier_path,
  curviness: 12
}, ease: Power1.easeInOut }, 0.0222);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js