<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Circular Lissajous Glow</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: radial-gradient(circle at center, #000010, #000000);
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
window.addEventListener("resize", () => {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
});
function hslColor(hue) {
return `hsl(${hue}, 100%, 60%)`;
}
function drawCircularLoop(time) {
ctx.clearRect(0, 0, width, height);
const centerX = width / 2;
const centerY = height / 2;
const radius = 120; // orbit radius
const loops = 12; // number of petals
const amp = 80; // amplitude (petal depth)
const speed = time * 0.002;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = hslColor(speed * 100 % 360);
ctx.shadowColor = ctx.strokeStyle;
ctx.shadowBlur = 30;
for (let angle = 0; angle <= Math.PI * 2; angle += 0.01) {
const r = radius + Math.sin(angle * loops + speed) * amp;
const x = centerX + Math.cos(angle) * r;
const y = centerY + Math.sin(angle) * r;
if (angle === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
requestAnimationFrame(drawCircularLoop);
}
drawCircularLoop(0);
</script>
</body>
</html>