Gelombang hijau (CSS, JS)

Demo

HTML view ▼

<div class="labu">
  <div class="bks">
    <canvas id="grk"></canvas>
</div>
</div>
<style>
  .labu {
    padding: 0;
    margin: 0;
    width: 100%;
    background: #172412;
    border: 3px solid #d9ead3;
    border-radius: 8px;
}
.bks {   
    top: 0;
    left: 0;   
    display: flex;
    justify-content: center;
    align-items: center;
}
canvas {
    height: 50vh;
  width: 100%; 
}
</style>
<script>
  const containerEl = document.querySelector(".bks");
const canvasEl = containerEl.querySelector("#grk");
const ctx = canvasEl.getContext('2d');
const resolution = 4;
let screen;
resizeCanvas();
const speed = .0018;
let cycleCnt = 0
let pointsPrev = generatePoints();
let pointsNext = generatePoints();
updateCanvas();
window.addEventListener("resize", () => {
    resizeCanvas();
    pointsPrev = generatePoints();
    pointsNext = generatePoints();
});
function resizeCanvas() {
    screen = {
        w: window.innerWidth * resolution,
        h: 300 * resolution,
    };
    canvasEl.width = screen.w;
    canvasEl.height = screen.h;
}
function updateCanvas(t) {
    let time = speed * t % 1;
    if (speed * t > (cycleCnt + 1)) {
        cycleCnt++;
        pointsPrev = [...pointsNext];
        pointsNext = generatePoints();
    }
    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
    ctx.lineWidth = 4 * resolution;
    ctx.strokeStyle = "#b6d7a8";
    ctx.beginPath();
    ctx.moveTo(-10, .5 * screen.h);
    pointsPrev.forEach((prev, idx) => {
        const x = lerp(prev[0], pointsNext[idx][0], time);
        const y = lerp(prev[1], pointsNext[idx][1], time);
        ctx.lineTo(x, y);
    })
    ctx.stroke();
    window.requestAnimationFrame(updateCanvas);
}
function generatePoints() {
    let p = [];
    const freq = (.05 + Math.random() * .05) / resolution;
    const amplitude = (.1 + Math.random() * .45) * screen.h * 0.9;
    for (let i = 0; i < screen.w; i++) {
        p.push([
            i,
            Math.floor(amplitude * Math.sin(i * freq) + .5 * screen.h)
        ])
    }
    return p;
}
function lerp(start, end, fraction) {
    return (1 - fraction) * start + fraction * end;
}
</script>

Tutup

JS dipetik dari codepen.io/ksenia-k/pen/PoxdXMJ