Cosmos Star Animation is a free, copy-paste ready HTML5 Canvas particle animation
built with pure vanilla JavaScript — zero external libraries. It creates a hypnotic space effect
where colorful glowing particles continuously burst outward from the hidden outline of a
5-spike star shape at the center of the screen. The star is defined by 10
emission points: 5 outer spikes at radius 120 and 5 inner valleys at radius 55, calculated via
polar math starting at rot = Math.PI/2*3 (12 o'clock position) with
step = Math.PI/spikes between each point.
Each frame, there is an 80% chance (Math.random() < 0.8) a new
Particle spawns from a randomly selected emission point with a
fully random angle (Math.random() * Math.PI * 2). Particle velocity:
vx = Math.cos(angle) * speed, vy = Math.sin(angle) * speed
(speed random 1–4). Each particle lives until its life value (starting at 1)
decays to zero, decrementing by a random decay (0.01–0.03) per frame.
Color uses hsl(hue, 100%, 60%) with hue = 20 + Math.random()*60
— a warm yellow-orange spectrum (20–80°).
ctx.globalAlpha = life creates natural fade-out as particles age.
Rather than calling ctx.clearRect() each frame (which would erase everything),
the animation overlays a semi-transparent black fill: ctx.fillStyle = "rgba(0,0,0,0.25)"
then ctx.fillRect(0, 0, canvas.width, canvas.height). This darkens all existing
pixels by 25% per frame — particles from previous frames gradually fade to black rather than
disappearing instantly, creating persistent glowing trails. Adjusting the alpha controls trail
length: 0.05 creates long dreamlike trails, 0.5 creates
sharp, brief flashes. The current 0.25 balances depth and responsiveness.
Setting ctx.globalCompositeOperation = "lighter" switches Canvas from standard
alpha compositing to additive blending. Where particles overlap, their
color channel values add together: two orange particles at 60% brightness sum toward white
at the overlap. This creates a natural bloom/glow effect — dense regions of particles
brighten dramatically, sparse regions stay dim — exactly mimicking how light physically
behaves. No blur filters or shadow effects are needed; the glow emerges purely from
particle density and additive blending.
Cosmos Star Animation is ideal for: space-themed website backgrounds, loading/intro screens, sci-fi UI overlays, game menu backgrounds, music visualizer bases, stream overlays, digital art installations, Canvas API learning tutorials (Particle class, polar math, composite operations), and any creative project requiring an infinite full-screen particle effect without a library.
Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cosmos Star Animation</title> <style> body { margin: 0; height: 100vh; background: radial-gradient(circle at center, #0a0a0a, #000); overflow: hidden; font-family: "Fira Code", "Courier New", monospace; display: flex; justify-content: center; align-items: center; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } </style>
</head>
<body> <canvas id="cosmos"></canvas> <script> const canvas = document.getElementById("cosmos"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Particle { constructor(x, y, angle) { this.x = x; this.y = y; this.size = Math.random() * 2 + 1; const speed = Math.random() * 3 + 1; this.vx = Math.cos(angle) * speed; this.vy = Math.sin(angle) * speed; this.life = 1; this.decay = Math.random() * 0.02 + 0.01; this.hue = 20 + Math.random() * 60; } update() { this.x += this.vx; this.y += this.vy; this.life -= this.decay; } draw() { ctx.globalAlpha = this.life; ctx.fillStyle = `hsl(${this.hue},100%,60%)`; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; } } const particles = []; function starPath(cx, cy, spikes, outer, inner) { const pts = []; let rot = Math.PI / 2 * 3; const step = Math.PI / spikes; for (let i = 0; i < spikes; i++) { pts.push({ x: cx + Math.cos(rot) * outer, y: cy + Math.sin(rot) * outer }); rot += step; pts.push({ x: cx + Math.cos(rot) * inner, y: cy + Math.sin(rot) * inner }); rot += step; } return pts; } let centerX = canvas.width / 2; let centerY = canvas.height / 2; let starPoints = starPath(centerX, centerY, 5, 120, 55); function animate() { ctx.fillStyle = "rgba(0,0,0,0.25)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighter"; if (Math.random() < 0.8) { const p1 = starPoints[Math.floor(Math.random() * starPoints.length)]; const angle = Math.random() * Math.PI * 2; particles.push(new Particle(p1.x, p1.y, angle)); } for (let i = 0; i < particles.length; i++) { const p = particles[i]; p.update(); p.draw(); if (p.life <= 0) { particles.splice(i, 1); i--; } } requestAnimationFrame(animate); } animate(); window.addEventListener("resize", () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; centerX = canvas.width / 2; centerY = canvas.height / 2; starPoints = starPath(centerX, centerY, 5, 120, 55); }); </script>
</body>
</html>
Common questions about the free Cosmos Star Animation Canvas particle burst JavaScript project.
Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it in personal, commercial, space-themed, or sci-fi projects with attribution to Coodeverse.
Generate emission points along the star shape using polar math. rot = Math.PI/2*3 starts at top. step = Math.PI/spikes. Each outer point: cx + Math.cos(rot)*outer. Each inner point: cx + Math.cos(rot)*inner. In the animate loop, pick a random point and spawn a Particle with angle = Math.random()*Math.PI*2 — velocity: vx = Math.cos(angle)*speed, vy = Math.sin(angle)*speed. Particles fly in all directions from the star outline.
ctx.globalCompositeOperation = "lighter" switches Canvas to additive blending. Where particles overlap, color channel values add together — dense areas brighten toward white while sparse areas stay dark. This creates a natural bloom/glow effect without any blur filter. Two 60%-brightness orange particles overlapping will appear significantly brighter at the intersection, mimicking physical light behavior.
Instead of clearRect(), fill with semi-transparent black each frame: ctx.fillStyle = "rgba(0,0,0,0.25)"; ctx.fillRect(0,0,canvas.width,canvas.height). Each frame darkens all pixels by 25%, so particles from previous frames slowly fade to black rather than disappearing. Lower alpha (like 0.05) = longer dreamlike trails. Higher alpha (like 0.5) = short, snappy flashes.
Constructor sets: this.size = Math.random()*2+1; speed = Math.random()*3+1; this.vx = Math.cos(angle)*speed; this.vy = Math.sin(angle)*speed; this.life = 1; this.decay = Math.random()*0.02+0.01; this.hue = 20+Math.random()*60. update(): advance position and decrement life. draw(): set ctx.globalAlpha = life, draw filled arc. Remove dead particles with splice(i,1); i--.
Add a resize listener: window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; centerX = canvas.width/2; centerY = canvas.height/2; starPoints = starPath(centerX, centerY, 5, 120, 55); }). Setting canvas.width and canvas.height (not CSS dimensions) resets the coordinate space. Regenerating starPoints re-centers the star on the new screen size.
Browse coodeverse.com/projects — VORTEX Interactive Canvas (800 reactive particles + 3 metaballs), Realistic Cursor Dragon (50-segment physics body + fire breath), Particle Fireworks, Kerr Black Hole, and more. All 100% free with complete HTML CSS JavaScript source code.