<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <g id="spot">
      <path d="M4.75,8.54S7.67,6.66,9.79,1a3.39,3.39,0,0,0,.06-2.15C9.16-3.49,7-8.73,1.49-9.89c0,0-6.22-.19-8.07,1A16.09,16.09,0,0,0-10-4s-.29,5.74,1.46,8.8c0,0,4,5.1,7.15,5.1A16.71,16.71,0,0,0,4.75,8.54Z"/>
      <path d="M9.17-1.88A3.33,3.33,0,0,1,9.11.25C7,5.84,4.08,7.7,4.08,7.7A16.78,16.78,0,0,1-2,9c-2.42,0-5.32-3-6.54-4.36l.05.11s4,5.1,7.15,5.1A16.71,16.71,0,0,0,4.75,8.54S7.67,6.66,9.79,1a3.39,3.39,0,0,0,.06-2.15A14.43,14.43,0,0,0,6.18-7.42,14.79,14.79,0,0,1,9.17-1.88Z" fill="#fff" opacity="0.5"/>
    </g>
  </defs>
  <use class="spot" xlink:href="#spot" x="50" y="10" fill="#db303f"/>
  <use class="spot" xlink:href="#spot" x="84" y="30" fill="#f17920"/>
  <use class="spot" xlink:href="#spot" x="84" y="70" fill="#f7db45"/>
  <use class="spot" xlink:href="#spot" x="50" y="90" fill="#6ddc3b"/>
  <use class="spot" xlink:href="#spot" x="16" y="70" fill="#459dd3"/>
  <use class="spot" xlink:href="#spot" x="16" y="30" fill="#7335b7"/>
</svg>

html {
  background: #010101;
}

svg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: calc(100px + 2vw);
  width: calc(100px + 2vw);
}

.is-flipped {
  fill: #e9e0cc;
}

const def = document.getElementById('spot');
const spots = Array.from(document.querySelectorAll('.spot'));
const timeline = new TimelineMax({
  repeat: -1
});

TweenMax.to(def, 0.2 * spots.length, {
  rotation: 360 / 4 * 3,
  transformOrigin: '50% 50%',
  repeat: -1,
  ease: SteppedEase.config(4)
});

spots.forEach((spot, index) => {
  const rotation = (360 / spots.length * index);
  
  TweenMax.set(spot, {
    rotation: rotation,
    // transformOrigin: '50% 50%'
    svgOrigin: `${spot.getAttribute('x')} ${spot.getAttribute('y')}`
  });
  
  timeline.to(spot, 0.1, {
    scaleX: 0.15,
    ease: Circ.easeInOut,
    onComplete: () => spot.classList.toggle('is-flipped')
  });
  
  timeline.to(spot, 0.1, {
    scaleX: 1,
    ease: Circ.easeInOut
  });
});