<p>👇🏻 Click!</p>
<div id="shape"/>

<svg>
  <defs>
    <clipPath id="circles">
      <circle cx="25" cy="10" r="10"/>
      <circle cx="10" cy="40" r="10"/>
      <circle cx="40" cy="40" r="10"/>
    </clipPath>
    
    <clipPath id="circle">
      <circle cx="25" cy="25" r="20"/>

    </clipPath>
  </defs>
</svg>

#shape {
  width: 50px;
  height: 50px;
  background-color: #4527a0;
  clip-path: url(#circles);
  margin: 1em;
}

.animated {
  animation: moveX 2s ease-in-out, moveY 2s 2s;
}

@keyframes moveX {
  0% {
    background-color: #006064;
  }
  
  50% {
    transform: translateX(600px) rotate(360deg);
  }
}

const shape = document.querySelector('#shape');

const moveXAnimation = {
  transform: ['translateX(0px)', 'translateX(600px) rotate(720deg)']
};

shape.addEventListener('click', () => {
  shape.animate(moveXAnimation, {
    duration: 2000,
  });
});