尝试创建跳动的波纹圈效果

Question

我想在画布上创建一个动画圆。我追求的效果显示在该网站的菜单栏左上角。

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

等待简介结束。

我尝试自己在Codepen中创建效果，但我有点受阻。我不知道如何减慢速度并使它变得更加随机。

我什至可能需要使用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();

我希望有人能帮助我。也许显示或解释我可以解决的方法。