<div class="container">
        <svg>
            <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke-width='2' stroke="black" fill="transparent"/>
        </svg>
        <div class="circle"></div>
    </div>
.container{
  position: relative;
  width: 335px;
  height: 335px;
  margin: 50px auto;
}

.circle {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: lime;
  border-radius: 50%;
  top:-165px;
  left:-10px;
}
let path = anime.path('path');

anime({
  targets: '.circle',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js