Waves

index.html

<canvas id="canvas"></canvas>

script.js

var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  perlin = new ClassicalNoise(),
  variation = 0.007,
  amp = 160,
  variators = [],
  max_lines =
    navigator.userAgent.toLowerCase().indexOf("firefox") > -1 ? 25 : 40,
  canvasWidth,
  canvasHeight,
  start_y;

for (var i = 0, u = 0; i < max_lines; i++, u += 0.032) {
  variators[i] = u;
}

function draw() {
  ctx.shadowColor = "rgba(0, 0, 0, 1)";
  ctx.shadowBlur = 6;

  for (var i = 0; i <= max_lines; i++) {
    ctx.beginPath();
    ctx.moveTo(0, start_y);
    for (var x = 0; x <= canvasWidth; x++) {
      var y = perlin.noise(x * variation + variators[i], x * variation, 0);
      ctx.lineTo(x, start_y + amp * y);
    }
    var color = Math.floor(50 * Math.abs(y));
    var alpha = Math.min(Math.abs(y) + 1.5, 0.25);
    ctx.strokeStyle = "rgba(255,255,255," + alpha * 2 + ")";
    ctx.stroke();
    ctx.closePath();

    variators[i] += 0.0075;
  }
}

(function init() {
  resizeCanvas();
  animate();
  window.addEventListener("resize", resizeCanvas);
})();

function animate() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  draw();
  requestAnimationFrame(animate);
}

function resizeCanvas() {
  (canvasWidth = document.documentElement.clientWidth),
    (canvasHeight = document.documentElement.clientHeight);

  canvas.setAttribute("width", canvasWidth);
  canvas.setAttribute("height", canvasHeight);

  start_y = canvasHeight / 2;
}

scripts

<script src="https://codepen.io/Thibka/pen/LWGOWR"></script>

style.css

html, body {
  margin: 0;
  background-color: black;
  overflow: hidden;
  background: gray
    background: rgb(42,42,42);
background: radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(0,0,0,1) 100%);
}
  
}

waves.markdown

Waves

A Pen by molotov.bliss on CodePen.

License.