<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 100 100">
  <circle fill="#FEFEFE" cx="50" cy="50" r="6" id="middle"/>
  <circle fill="#1FA756" cx="62.5" cy="43.5" r="4.5"/>
  <circle fill="#1FA756" cx="37.5" cy="43.5" r="4.5"/>
  <circle fill="#1FA756" cx="50" cy="37" r="4.5"/>
  <circle fill="#1FA756" cx="62.5" cy="56.5" r="4.5"/>
  <circle fill="#1FA756" cx="37.5" cy="56.5" r="4.5"/>
  <circle fill="#1FA756" cx="50" cy="65" r="4.5"/>
</svg>
// Demo Styling
html,body {height: 100%;}body{display: flex;flex-direction:column;align-items: center;justify-content:center;width:100%;background:#2A3744;}svg{max-width:100%;}

// Required Styling
svg > circle:nth-of-type {
  position: absolute;
  transform: scale(0);
}
View Compiled
var tmax_options = {
  repeat: -1,
  yoyo: true
};

var tmax_tl          = new TimelineMax(tmax_options),
    tween_options_to = {
      css: {
        transform: 'scale(0)',
        transformOrigin: 'center center'
      },
      ease: Cubic.easeInOut,
      force3D: true
    };

// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > circle:nth-of-type(1)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(2)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(3)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(4)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(5)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(6)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(7)'), 1, tween_options_to, 0)

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.14.2/TweenMax.min.js