Cosmic Shear

HTML

CSS

JS

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0;
let colorOffset = 0;
let isShifted = false;
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.onresize = resize;
resize();
window.onpointerdown = () => isShifted = !isShifted;
function draw() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  const centerX = canvas.width / 2;
  const centerY = canvas.width / 2;
  const numShapes = 35;
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  for (let i = 0; i < numShapes; i++) {
    const angle = Math.sin(time + i * 0.1) * (isShifted ? 1.5 : 0.2);
    const hue = (colorOffset + i * 4) % 360;
    ctx.strokeStyle = `hsl(${hue}, 80%, 60%)`;
    ctx.lineWidth = 1.5;
    const scale = 1 - (i / numShapes);
    const size = 300 * scale;
    ctx.save();
    ctx.rotate(angle);
    ctx.beginPath();
    if (!isShifted) {
      ctx.rect(-size / 2, -size / 2, size, size);
    } else {
      ctx.moveTo(0, -size/2);
      ctx.lineTo(size/2, 0);
      ctx.lineTo(0, size/2);
      ctx.lineTo(-size/2, 0);
      ctx.closePath();
    }
    ctx.stroke();
    ctx.restore();
  }
  ctx.restore();
  time += 0.02;
  colorOffset += 0.5;
  requestAnimationFrame(draw);
}
draw();

Ad #1

Ad #2