const canvas = document.getElementById("galaxy-canvas");
const ctx = canvas.getContext("2d");

let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;

const particles = new Array();
const particleCount = 800;

const mouse = new Object();
mouse.x = width / 2;
mouse.y = height / 2;

window.addEventListener("mousemove", function(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

window.addEventListener("resize", function() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
});

// Initialize the particle objects
for (let i = 0; i < particleCount; i++) {
  const p = new Object();
  p.angle = Math.random() * Math.PI * 2;
  p.radius = Math.random() * (width / 1.5);
  p.speed = (Math.random() * 0.005) + 0.001;
  p.size = Math.random() * 2 + 0.5;
  p.color = Math.random() > 0.5 ? "#3b82f6" : "#ec4899";
  particles.push(p);
}

function draw() {
  // Create a slight trailing effect by painting semi-transparent background
  ctx.fillStyle = "rgba(2, 6, 23, 0.1)";
  ctx.fillRect(0, 0, width, height);

  particles.forEach(function(p) {
    p.angle += p.speed;
    
    // Determine target location based on angle and radius
    const targetX = width / 2 + Math.cos(p.angle) * p.radius;
    const targetY = height / 2 + Math.sin(p.angle) * p.radius;
    
    // Check distance to mouse
    const dx = mouse.x - targetX;
    const dy = mouse.y - targetY;
    const dist = Math.sqrt(dx * dx + dy * dy);
    
    let offsetX = 0;
    let offsetY = 0;
    
    // Gently pull particles toward the mouse if they get close
    if (dist < 250) {
      const force = (250 - dist) / 250;
      offsetX = dx * force * 0.1;
      offsetY = dy * force * 0.1;
    }
    
    ctx.beginPath();
    ctx.arc(targetX + offsetX, targetY + offsetY, p.size, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.shadowBlur = 10;
    ctx.shadowColor = p.color;
    ctx.fill();
  });

  window.requestAnimationFrame(draw);
}

draw();

Back to Snippets

Interactive Galaxy Spiral Animation JS

Build an interactive galaxy spiral using HTML5 Canvas. We animate hundreds of particles rotating around a central core, so your background mesmerizes.

122

#javascript

#canvas

#galaxy

#spiral

#particles

#animation

#interactive

#space

/HTML *CSS ()JS Output Live Updates

const canvas = document.getElementById("galaxy-canvas");
const ctx = canvas.getContext("2d");

let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;

const particles = new Array();
const particleCount = 800;

const mouse = new Object();
mouse.x = width / 2;
mouse.y = height / 2;

window.addEventListener("mousemove", function(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

window.addEventListener("resize", function() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
});

// Initialize the particle objects
for (let i = 0; i < particleCount; i++) {
  const p = new Object();
  p.angle = Math.random() * Math.PI * 2;
  p.radius = Math.random() * (width / 1.5);
  p.speed = (Math.random() * 0.005) + 0.001;
  p.size = Math.random() * 2 + 0.5;
  p.color = Math.random() > 0.5 ? "#3b82f6" : "#ec4899";
  particles.push(p);
}

function draw() {
  // Create a slight trailing effect by painting semi-transparent background
  ctx.fillStyle = "rgba(2, 6, 23, 0.1)";
  ctx.fillRect(0, 0, width, height);

particles.forEach(function(p) {
    p.angle += p.speed;
    
    // Determine target location based on angle and radius
    const targetX = width / 2 + Math.cos(p.angle) * p.radius;
    const targetY = height / 2 + Math.sin(p.angle) * p.radius;
    
    // Check distance to mouse
    const dx = mouse.x - targetX;
    const dy = mouse.y - targetY;
    const dist = Math.sqrt(dx * dx + dy * dy);
    
    let offsetX = 0;
    let offsetY = 0;
    
    // Gently pull particles toward the mouse if they get close
    if (dist < 250) {
      const force = (250 - dist) / 250;
      offsetX = dx * force * 0.1;
      offsetY = dy * force * 0.1;
    }
    
    ctx.beginPath();
    ctx.arc(targetX + offsetX, targetY + offsetY, p.size, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.shadowBlur = 10;
    ctx.shadowColor = p.color;
    ctx.fill();
  });

window.requestAnimationFrame(draw);
}

draw();

Interactive Galaxy Spiral Animation JS

Share Code Snippet