JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<body style="background:#15151b;">
<canvas id="c"></canvas>
  <div id='menu-topmenu' style="background:#fff; padding:15px; heigth:80px;">
  <a href="#" onclick="alert('x')">ddddddddddd</a><div id="speedometer"></div>
  </div>
  
</body>

CSS

.dot {
width: 130px;
height: 130px;
position: absolute;
background-size:contain;
background-repeat:no-repeat;
background: -moz-radial-gradient(center, ellipse cover, rgba(168, 33, 71, 0.45) 0%, rgba(168, 33, 71, 0.46) 2%, rgba(159,42,80,0) 67%, rgba(155,46,84,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(168, 33, 71, 0.48) 0%,rgba(168, 33, 71, 0.48) 2%,rgba(159,42,80,0) 67%,rgba(155,46,84,0) 100%);
background: radial-gradient(ellipse at center, rgba(168, 33, 71, 0.46) 0%,rgba(168, 33, 71, 0.47) 2%,rgba(159,42,80,0) 67%,rgba(155,46,84,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91a82147', endColorstr='#009b2e54',GradientType=1 );
z-index: -1;
}


canvas{
z-index:-1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
width:100%;
}

JavaScript

overmenu = false;

jQuery( "#menu-topmenu *" ).hover(
  function() {
	overmenu = true;
  }, function() {
    overmenu = false;
  }
);
 
function removeDot(deldot){
jQuery('#'+deldot).addClass('animated zoomFadeOut');
setTimeout(function(){
jQuery('#'+deldot).remove();
}, 400);
}


dotid = 1;

(function() {
    "use strict";

    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
      var dot, eventDoc, doc, body, pageX, pageY;
    
      event = event || window.event;

      if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
      }
      dot = document.createElement('div');
      dot.id = dotid;
      dot.className = "dot animated fadeIn";
      dot.style.left = event.pageX - 65 +"px";
      dot.style.top = event.pageY - 65 + "px";

			if(overmenu === false && event.pageY > 140){
      jQuery('body').append(dot);
      jQuery('#'+dotid).delay(300).fadeOut(100);
			removeDot(dotid);
       dotid++;
			}
    }
  })();




(function(w) {

    var canvas, ctx;
    
    /* 
    This is an associative array to hold the status of the mouse cursor
    Whenever the mouse is moved or pressed, there are event handlers that
    update the values in this array.
    */
    var mouse = {
        x: 0,
        y: 0,
        px: 0,
        py: 0,
        down: false
    };


    var canvas_width = 500; //Needs to be a multiple of the resolution value below.
    var canvas_height = 500; //This too.
    
    var resolution = 10; //Width and height of each cell in the...