<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
});
This Pen doesn't use any external CSS resources.