JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

#canvas{
  background:#acf;
  margin-top:100px;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
      
function lines(startX, startY, curveX, curveY, endX, endY){
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.quadraticCurveTo(curveX, curveY, endX, endY);
  ctx.stroke();
}


var coef = 0;
var delta = 50;
var radius = 150;
/*
for(var i = 0; i < 25; i++){
	lines(0, delta + delta*i, 0, delta + delta*i + delta*(Math.random() - 0.5) , canvas.width, delta + delta*i);
}
*/

canvas.addEventListener('mousemove', function(e){

	ctx.clearRect(0, 0, canvas.width, canvas.height);
	var mousePos = getMousePos(canvas, e);
   var startX = 0;
  var startY = 0;
  var endX = canvas.width;
  var endY = startY;
  var curveX = 0;
  var curveY = 0;
  
  for(var i = 0; i < 30; i++){
  	//console.log('startY: ' + startY + '\n mousePos.y: ' + mousePos.y);
  	if( startY < mousePos.y && startY >  mousePos.y - radius ){
    	lines(startX, startY, mousePos.x, curveY - 40*(mousePos.y - startY)/radius, endX, endY);
    }else if(startY > mousePos.y && startY <  mousePos.y + radius){
    	lines(startX, startY, mousePos.x, curveY + 40*(startY - mousePos.y )/radius, endX, endY);
    }
    else{
    	lines(startX, startY, curveX, curveY, endX, endY);
    }
    startY += delta;
    endY = startY;
    curveY += delta;
  }
});


function draw(startX, startY, curveX, curveY, endX, endY){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	for(var i = 0; i < 25; i++){
    lines(0, delta + delta*i, 0, delta + delta*i + delta*(Math.random() - 0.5) , canvas.width, delta + delta*i);
  }
}

/*
var raf;
canvas.addEventListener('mousemove', function(e) {
  raf = window.requestAnimationFrame(draw);
});


*/

canvas.addEventListener("mouseout", function(e) {
  ctx.clearRect(0, 0,...