<html>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
let canvas, ctx, wave, theta;
let step = 2
window.onload = () => {
canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx = canvas.getContext("2d");
wave = {
y: window.innerHeight / 2,
length: 200000,
amplitude: 80,
speed: 0.01,
};
theta = 0;
window.requestAnimationFrame(animation);
};
function animation(timestamp) {
window.requestAnimationFrame(animation);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = `rgb(0, 0, 0)`;
ctx.lineWidth = 1;
// NOTE: Left waves
for (let i = 0; i < window.innerWidth / 2; i += step){
ctx.beginPath();
const x = i;
const y = wave.y + Math.sin(i * wave.length) * wave.amplitude;
ctx.ellipse(x, y, 2, 2, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.