JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<canvas id="canvas" height=320 width=600></canvas>
</body>
</html>

CSS

#canvas {
  border: 2px solid black;
}

JavaScript

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let drawCheck = false;
ctx.strokeStyle = "#808080";
let points = 40;
let offsets = [];
let radius = 50;
let prev = {
  x: -1,
  y: -1
};
let curr = {
  x: -1,
  y: -1
};

for (let i = 0; i < points; i++) {
  offsets.push([Math.random() * radius * (-1) ** i, Math.random() * radius * (-1) ** i, 1 + Math.random() * 4]);
}

function draw(x, y) {
  curr.x = x;
  curr.y = y;

  if (drawCheck) {
    if (prev.x == -1) {
      offsets.forEach(offset => {
        ctx.beginPath();
        ctx.arc(curr.x + offset[0], curr.y + offset[1], 1, 0, 2 * Math.PI);
        ctx.fill();
        prev.x = curr.x;
        prev.y = curr.y;
      });
    } else {
      offsets.forEach(offset => {
      ctx.lineWidth = offset[2];
        ctx.beginPath();
        ctx.moveTo(prev.x + offset[0], prev.y + offset[1]);
        ctx.lineTo(curr.x + offset[0], curr.y + offset[1]);
        ctx.stroke();
      })
      prev.x = curr.x;
      prev.y = curr.y;
    }

  }
}

document.addEventListener("mousedown", (e) => drawCheck = true);
document.addEventListener("mousemove", (e) =>
  draw(e.clientX, e.clientY));
document.addEventListener("mouseup", (e) => {
  drawCheck = false;
  prev = {
    "x": -1,
    "y": -1
  };
});