Compass Field Flow

HTML

CSS

JS

const canvas = document.getElementById("field");
const ctx = canvas.getContext("2d");
let w, h;
const spacing = 30;
let mouse = { x: -999, y: -999 };
function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize);
resize();
window.addEventListener("mousemove", e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});
function drawArrow(x, y, angle) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.moveTo(-6, 0);
  ctx.lineTo(6, 0);
  ctx.lineTo(2, -3);
  ctx.moveTo(6, 0);
  ctx.lineTo(2, 3);
  ctx.stroke();
  ctx.restore();
}
function animate() {
  ctx.clearRect(0, 0, w, h);
  ctx.strokeStyle = "rgba(124,255,203,0.7)";
  ctx.lineWidth = 1;
  for (let y = 20; y < h; y += spacing) {
    for (let x = 20; x < w; x += spacing) {
      const dx = mouse.x - x;
      const dy = mouse.y - y;
      const angle = Math.atan2(dy, dx);
      drawArrow(x, y, angle);
    }
  }
  requestAnimationFrame(animate);
}
animate();

Ad #1

Ad #2