JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

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

CSS

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

JavaScript

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

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

  function psychedelicEffect(time) {
    //ctx.clearRect(0, 0, canvas.width, canvas.height);

    const numCircles = 10;
    for (let i = 0; i < numCircles; i++) {
      ctx.beginPath();

      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;

      const radius = (canvas.width + canvas.height) / 4 * (i / numCircles) * (Math.sin(time * 0.0005 * (i + 1)) + 1) / 2;
      const angleOffset = time * 0.0002 * (i + 1);

      const x = centerX + Math.cos(angleOffset) * radius;
      const y = centerY + Math.sin(angleOffset) * radius;

      ctx.arc(x, y, radius / 5, 0, 2 * Math.PI);

      const r = Math.sin(time * 0.001 * (i + 1)) * 128 + 128;
      const g = Math.sin(time * 0.002 * (i + 1)) * 128 + 128;
      const b = Math.sin(time * 0.003 * (i + 1)) * 128 + 128;

      ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.75)`;
      ctx.fill();
    }
  }

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

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