Pastel dots net

Please hover over the canvas

       
(CSS)

@import url(https://fonts.googleapis.com/css?family=Gabriela:400normal);
body {
  margin: 0;
  overflow: active;
  background: black;
}

h1 {
  text-align: center;
  color: white;
  font-family: 'Gabriela' !important;
  font-style: normal;
  font-weight: 400;
  font-size:30px;
  margin:1em;
}

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

(JAVA)

  script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width;
var ch = c.height;

var step = 30;
var dotR = 1;
var T = .01;
var grd = ctx.createLinearGradient(0, 0, c.width, 0);
grd.addColorStop(0, "hsl(300,100%,75%)");
grd.addColorStop("0.3", "hsl(203,100%,75%)");
grd.addColorStop("0.6", "hsl(84,100%,75%)");
grd.addColorStop("0.8", "hsl(60,100%,75%)");
grd.addColorStop(1, "hsl(0,100%,75%)");
ctx.fillStyle = grd;

function DrawCurves() {
  ctx.beginPath();
  for (var l = -cw; l <= 2 * cw; l += step) {if (window.CP.shouldStopExecution(0)) break;
    /*ctx.moveTo(l,0);// aquí empieza la curva
    ctx.quadraticCurveTo(cX,cY,l,ch);
    ctx.stroke();*/
    for (var t = 0; t <= 1; t += T) {if (window.CP.shouldStopExecution(1)) break;
      var x = (1 - t) * (1 - t) * l + 2 * (1 - t) * t * cX + t * t * l;
      var y = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * cY + t * t * ch;
      ctx.moveTo(x + dotR, y);
      ctx.arc(x, y, dotR, 0, 2 * Math.PI);
    }window.CP.exitedLoop(1);
  }window.CP.exitedLoop(0);

  for (var b = -ch; b <= 2 * ch; b += step) {if (window.CP.shouldStopExecution(2)) break;
    /*ctx.moveTo(0,b);// aquí empieza la curva
    ctx.quadraticCurveTo(cX,cY,cw,0);
    ctx.stroke();*/
    for (var t1 = 0; t1 <= 1; t1 += T) {if (window.CP.shouldStopExecution(3)) break;
      var x = (1 - t1) * (1 - t1) * 0 + 2 * (1 - t1) * t1 * cX + t1 * t1 * cw;
      var y = (1 - t1) * (1 - t1) * b + 2 * (1 - t1) * t1 * cY + t1 * t1 * b;
      ctx.moveTo(x + dotR, y);
      ctx.arc(x, y, dotR, 0, 2 * Math.PI);
    }window.CP.exitedLoop(3);
  }window.CP.exitedLoop(2);

  ctx.fill();
}

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top) };
}

c.addEventListener("mousemove", function (evt) {
  ctx.clearRect(0, 0, cw, ch);
  var mousePos = oMousePos(c, evt);
  cX = mousePos.x;
  cY = mousePos.y;
  DrawCurves();

}, false);

window.addEventListener("load", function (evt) {
  cX = cw / 2;
  cY = ch / 2;
  DrawCurves();

}, false);
c.addEventListener("mouseleave", function (evt) {
  ctx.clearRect(0, 0, cw, ch);
  cX = cw / 2;
  cY = ch / 2;
  DrawCurves();

}, false);