Попытка создать эффект прыгающего круга

Question

Я хочу создать анимированный круг на холсте.Эффект, который мне нужен, показан в строке меню в верхнем левом углу этого веб-сайта.

https://efirmedia.com/cases/overall-murals/

Дождитесь окончания вступления.

Я пыталсясоздать эффект сам в коде, но я немного застрял.Я не знаю, как заставить его замедляться и делать его более случайным.

Мне может даже понадобиться использовать bizer вместо него.

https://codepen.io/anon/pen/yWWGYb?editors=1010

class Circle{
constructor(){

this.canvas = document.getElementById("myCanvas")
this.ctx = this.canvas.getContext("2d")
this.sineCount = 7;
this.amp = 10;
this.increament = 1;
this.count = 0
this.countSwitch = false;

requestAnimationFrame(this.animCircle.bind(this));
}

animCircle(){
this.cx = 150;
this.cy = 150;
this.radius=100;

if(this.countSwitch){
this.amp = this.amp + 1;
if(this.amp == 10){
this.countSwitch = false;
}
}else{
this.amp = this.amp - 1;
if(this.amp == 1){
this.countSwitch = true;
}
}

//this.amp = Math.floor((Math.random() * 10) + 1);
this.count = this.count + this.increament;

if(this.count >= 2){

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
this.count = 0
this.ctx.beginPath();

for(var i=0;i<360;i++){
this.angle = i * Math.PI / 180;
this.pt = this.sineCircleXYatAngle(this.cx,this.cy,this.radius,this.amp,this.angle,this.sineCount);
this.ctx.lineTo(this.pt.x,this.pt.y);
}

this.ctx.closePath();
this.ctx.stroke();
}

this.animation = requestAnimationFrame(this.animCircle.bind(this));
}

sineCircleXYatAngle(cx,cy,radius,amplitude,angle,sineCount){
var x = cx+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);
var y = cy+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);
return({x:x,y:y});
}

};

var baseCircle = new Circle();

Я надеюсь, что кто-то может мне помочь.Может быть, покажи или объясни, что я могу сделать, чтобы решить эту проблему.