Run this code instantly in your browser: https://instacode.app/gist/b7d7007a81e86266f882690cc7ec656a

singularity.js

import { canvas, onResize } from 'canvas';
const ctx = canvas.getContext('2d');

onResize((width, height) => {
  // Adjust drawing buffer size to match splitter dimensions
  canvas.width = width;
  canvas.height = height;

  // 1. Background - elegant, dark navy (cyber-dark style)
  ctx.fillStyle = '#090d16';
  ctx.fillRect(0, 0, width, height);

  // 2. Draw a subtle geometric background grid
  ctx.strokeStyle = 'rgba(59, 130, 246, 0.06)';
  ctx.lineWidth = 1;
  const gridSize = 40;
  for (let x = 0; x < width; x += gridSize) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, height);
    ctx.stroke();
  }
  for (let y = 0; y < height; y += gridSize) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(width, y);
    ctx.stroke();
  }

  const centerX = width / 2;
  const centerY = height / 2;
  const maxDimension = Math.min(width, height);

  // 3. GLOW EFFECT (Radial Gradient)
  // Parameters: inner circle center (x, y) & radius, outer circle center (x, y) & radius
  const neonGlow = ctx.createRadialGradient(
    centerX, centerY, 5,
    centerX, centerY, maxDimension * 0.4
  );
  neonGlow.addColorStop(0, 'rgba(168, 85, 247, 1)');      // Violet at the very center
  neonGlow.addColorStop(0.2, 'rgba(139, 92, 246, 0.6)');  // Blurred violet
  neonGlow.addColorStop(0.6, 'rgba(59, 130, 246, 0.2)');   // Transition into blue
  neonGlow.addColorStop(1, 'rgba(99, 102, 241, 0)');       // Fade out to background

  ctx.fillStyle = neonGlow;
  ctx.beginPath();
  ctx.arc(centerX, centerY, maxDimension * 0.4, 0, Math.PI * 2);
  ctx.fill();

  // 4. RING (Linear Gradient)
  // Define gradient line diagonally across the ring (top-left to bottom-right)
  const ringGrad = ctx.createLinearGradient(
    centerX - 100, centerY - 100,
    centerX + 100, centerY + 100
  );
  ringGrad.addColorStop(0, '#3b82f6');   // Start: Ocean blue
  ringGrad.addColorStop(0.5, '#ec4899'); // Middle: Vibrant pink
  ringGrad.addColorStop(1, '#8b5cf6');   // End: Violet

  ctx.strokeStyle = ringGrad;
  ctx.lineWidth = 10;
  
  // Enable native shadow for a neon glowing effect
  ctx.shadowColor = 'rgba(236, 72, 153, 0.4)';
  ctx.shadowBlur = 15;

  ctx.beginPath();
  ctx.arc(centerX, centerY, maxDimension * 0.22, 0, Math.PI * 2);
  ctx.stroke();

  // Disable shadow so it doesn't affect other elements (e.g. text)
  ctx.shadowBlur = 0;

  // 5. Resolution info in the bottom-right corner
  ctx.fillStyle = '#475569';
  ctx.font = '10px "JetBrains Mono", monospace';
  ctx.textAlign = 'right';
  ctx.textBaseline = 'bottom';
  ctx.fillText(`Splitter: ${width}x${height}px`, width - 16, height - 16);
});