像“ Discord”的“登录”页面中那样对“摇摆画布”进行动画处理？

作为参考，我正在谈论Discord登录页面左上方的深灰色空间。对于无法访问该链接的任何人，以下是屏幕截图：

它具有许多非常酷的效果，点和（较暗的阴影）随鼠标移动，但是我对“摆动边缘”效果更感兴趣，而对“快速摆动/缩放”则更感兴趣。页面加载时（加载时在画布上缩放会产生类似的效果，即使不是“更便宜”）。

不幸的是，我无法以MCVE的方式进行大量开发，因为我不确定自己从哪里开始。我尝试挖掘Discord的资产，但是我对Webpack不够熟悉，无法确定正在发生的事情。

我能够在“动画波/摆动”上挖掘的一切都是CSS驱动的SVG或剪切路径边框，我想产生一些更自然的东西。

该动画在画布上运行，它是一个简单的贝塞尔曲线动画。

为了获得自然的感觉，您应该看看Perlin噪声，这是在开发原始Tron视频FX 时引入的。

您可以在这里找到了解Perlin噪音的好指南。

在示例中，我使用了https://github.com/josephg/noisejs

var c = $('canvas').get(0).getContext('2d');
var simplex = new SimplexNoise();
var t = 0;

function init() {
	window.requestAnimationFrame(draw);
}

function draw() {
c.clearRect(0, 0, 600, 300);
c.stroke; 
c.moveTo(100,100);
c.lineTo(300,100);
c.stroke();                

// Draw a Bézier curve by using the same line cooridinates.
c.beginPath();              
c.line;
c.stroke; 
c.moveTo(100,100);
c.bezierCurveTo((simplex.noise2D(t,t)+1)*200,(simplex.noise2D(t,t)+1)*200,(simplex.noise2D(t,t)+1)*200,0,300,100);
c.stroke();

// draw reference points
c.fillRect(100-5,100-5,10,10);
c.fillRect(200-5,200-5,10,10);
c.fillRect(200-5,0-5,10,10);
c.fillRect(300-5,100-5,10,10);
t+=0.001;
window.requestAnimationFrame(draw);
}

init();