JSFiddle - React, Tailwind, and code Playground

by Li Sen

HTML

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

CSS

* {
  margin: 0;
  padding: 0;
}

JavaScript

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const pr = window.devicePixelRatio || 1;
const W = canvas.width = window.innerWidth * pr;
const H = canvas.height = window.innerHeight * pr;
const Hp = 0.7
const chartH = 90;
const pi = Math.PI * 2;
const cos = Math.cos;
let radius = 0;
let p;

function create() {
  ctx.clearRect(0, 0, W, H);
  p = [
    { x: 0, y: H * Hp + chartH },
    { x: 0, y: H * Hp - chartH },
  ];
  while(p[1].x < W) {
    draw(p[0], p[1]);
  }
}

function draw(p0, p1) {
  ctx.beginPath();
  ctx.moveTo(p0.x, p0.y);
  ctx.lineTo(p1.x, p1.y);
  const nx = calculateX(p1.x);
  const ny = calculateY(p1.y);
  ctx.lineTo(nx, ny);
  ctx.closePath();
  radius -= pi / -50;
  const color = '#' + (cos(radius) * 127 + 128 << 16 | cos(radius + pi / 3) * 127 + 128 << 8 | cos(radius + pi / 3 * 2) * 127 + 128).toString(16);
  console.log(cos(radius) * 127 + 128 << 16);
  console.log(cos(radius + pi / 3) * 127 + 128 << 8);
  console.log(cos(radius + (pi / 3) * 2));
  ctx.fillStyle = color;
  ctx.fill();
  p[0] = p[1];
  p[1] = {
    x: nx,
    y: ny,
  };
}

function calculateX(x) {
  return x + (Math.random() * 2 - 0.25) * chartH;
}

function calculateY(y) {
  const cy = y + (Math.random() * 2 - 1.1) * chartH;
  return (cy > H || cy < 0) ? calculateY(y) : cy;
}

window.addEventListener('click', create, false);
window.addEventListener('touchend', create, false);
create();