JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<canvas id="canvas" width="800" height="600"></canvas>

  <script>
    window.onload = function () {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var colors = ["#FFC0CB", "#FF1493", "#FF69B4", "#FF00FF", "#DA70D6", "#8A2BE2"];
      var lights = [];

      function createLight() {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var radius = Math.random() * 10 ;
        var color = colors[Math.floor(Math.random() * colors.length)];
        var speed = Math.random() * 0.2 - 0.5;

        lights.push({ x: x, y: y, radius: radius, color: color, speed: speed });
      }

      function updateLights() {
        for (var i = 0; i < lights.length; i++) {
          var light = lights[i];
          light.y -= light.speed;

          if (light.y + light.radius < 0) {
            // Remove the light if it goes off the canvas
            lights.splice(i, 1);
            i--;
          }
        }
      }

      function drawLights() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < lights.length; i++) {
          var light = lights[i];
          ctx.beginPath();
          ctx.arc(light.x, light.y, light.radius, 0, Math.PI * 2);
          ctx.fillStyle = light.color;
          ctx.fill();
          ctx.closePath();
        }
      }

      function animate() {
        createLight();
        updateLights();
        drawLights();

        requestAnimationFrame(animate);
      }

      animate();
    };
  </script>

CSS

body {
   	background: black;
		overflow: hidden;
   }
	 
	 #canvas {
      background-color: black;
			width: 100vw;
			height: 100vh;
			filter: blur(28px);
    }