JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

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

CSS

body { margin: 0; }
  canvas { display: block; }

JavaScript

const canvas = document.getElementById('plasmaCanvas');
  const ctx = canvas.getContext('2d');

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  function plasmaEffect(time) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data;

    for (let y = 0; y < canvas.height; y++) {
      for (let x = 0; x < canvas.width; x++) {
        const i = (y * canvas.width + x) * 4;

        const r = Math.sin(time * 0.001 + (x / canvas.width) * 2 * Math.PI) * 128 + 128;
        const g = Math.sin(time * 0.002 + (y / canvas.height) * 2 * Math.PI) * 128 + 128;
        const b = Math.sin(time * 0.003 + Math.sqrt((x - canvas.width / 2) ** 2 + (y - canvas.height / 2) ** 2) * 0.1) * 128 + 128;

        pixels[i] = r;
        pixels[i + 1] = g;
        pixels[i + 2] = b;
        pixels[i + 3] = 255;
      }
    }

    ctx.putImageData(imageData, 0, 0);
  }

  function animate(time) {
    plasmaEffect(time);
    requestAnimationFrame(animate);
  }

  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
  animate(0);