Gravity Grid Distortion

HTML

CSS

JS

const canvas = document.getElementById("grid");
const ctx = canvas.getContext("2d");
let w, h;
const spacing = 40;
let points = [];
let mouse = { x: -1000, y: -1000 };
function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  points = [];
  for (let y = 0; y < h; y += spacing) {
    for (let x = 0; x < w; x += spacing) {
      points.push({
        ox: x,
        oy: y,
        x,
        y
      });
    }
  }
}
window.addEventListener("resize", resize);
resize();
window.addEventListener("mousemove", e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});
function draw() {
  ctx.clearRect(0, 0, w, h);
  ctx.strokeStyle = "rgba(111,255,210,0.25)";
  ctx.lineWidth = 1;
  points.forEach(p => {
    const dx = mouse.x - p.ox;
    const dy = mouse.y - p.oy;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const force = Math.max(0, 200 - dist) / 200;
    p.x = p.ox - dx * force * 0.3;
    p.y = p.oy - dy * force * 0.3;
  });
  for (let y = 0; y < h; y += spacing) {
    ctx.beginPath();
    points.filter(p => p.oy === y).forEach((p, i) => {
      i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y);
    });
    ctx.stroke();
  }
  for (let x = 0; x < w; x += spacing) {
    ctx.beginPath();
    points.filter(p => p.ox === x).forEach((p, i) => {
      i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y);
    });
    ctx.stroke();
  }
  requestAnimationFrame(draw);
}
draw();

Ad #1

Ad #2