<canvas id="mrAngleGalaxy"></canvas>

part2- css(appearace Customize- Additional css

#mrAngleGalaxy {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
background: radial-gradient(circle at center, #0a0a0f, #000000);
}

part 3- JavaScript (Code Snippets” plugin or Theme CustomJs

const canvas = document.getElementById(“mrAngleGalaxy”);
const ctx = canvas.getContext(“2d”);

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.onresize = resize;

// Galaxy configuration
const center = { x: canvas.width / 2, y: canvas.height / 2 };
const rings = [
{ radius: 80, count: 5, speed: 0.0006 },
{ radius: 140, count: 5, speed: 0.0005 },
{ radius: 200, count: 5, speed: 0.0004 },
{ radius: 260, count: 5, speed: 0.0003 },
{ radius: 320, count: 5, speed: 0.0002 }
];

let dots = [];

// Create dots for each ring
rings.forEach((ring, index) => {
for (let i = 0; i < ring.count; i++) {
dots.push({
angle: Math.random() * Math.PI * 2,
radius: ring.radius,
speed: ring.speed,
size: 3,
glow: 10
});
}
});

// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw center star (Mr Angle)
ctx.beginPath();
ctx.arc(center.x, center.y, 6, 0, Math.PI * 2);
ctx.fillStyle = "white";
ctx.shadowBlur = 20;
ctx.shadowColor = "white";
ctx.fill();
// Draw orbiting dots
dots.forEach(dot => {
    dot.angle += dot.speed;
    const x = center.x + Math.cos(dot.angle) * dot.radius;
    const y = center.y + Math.sin(dot.angle) * dot.radius;
    ctx.beginPath();
    ctx.arc(x, y, dot.size, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(255,255,255,0.8)";
    ctx.shadowBlur = dot.glow;
    ctx.shadowColor = "white";
    ctx.fill();
});
requestAnimationFrame(animate);

}

animate();