JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var dd, mX, mY, Peyton, fps;
            
            $(document).ready(function(){
                dd = document.getElementById("canvas").getContext("2d");
                $("canvas").click(function(c){
                    mX = c.pageX;
                    mY = c.pageY;
                    fps = 30;
                    setInterval(function(){
                        for(var i = 0; i < 1; i++){
                        var randX = mX - 500 + Math.floor(Math.random() * 1000);
                        var randY = mY - 300 + Math.floor(Math.random() * 600);
                        randomCircle(randX, randY);
                    }
                    }, 100);
                });
            });
            function randomCircle(x, y){
                randomString = "#";
                randomColor = ['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9'];
                for(var i = 0; i < 6; i++){
                    var randNumber = Math.floor(Math.random() * randomColor.length);
                    var randChar = randomColor[randNumber];
                    randomString += randChar;
                }
                var randNumber = Math.floor(Math.random() * 12);
                dd.fillStyle = randomString;
                dd.beginPath();
                dd.arc(x, y, randNumber, 0, Math.PI * 2, true);
                dd.closePath();
                dd.fill();
            };