<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rotating Spring Loop</title>
<style>
body, html {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
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 animate(time) {
ctx.clearRect(0, 0, width, height);
const centerX = width / 2;
const centerY = height / 2;
ctx.lineWidth = 2;
ctx.strokeStyle = "#00ccff";
ctx.shadowColor = "#00ccff";
ctx.shadowBlur = 15;
ctx.beginPath();
const loops = 10; // Number of loops
const radius = 120; // Overall loop radius
const spread = 60; // Loop width
const t = time * 0.002;
for (let i = 0; i < loops * Math.PI; i += 0.05) {
// Angle for rotation
const angle = i + t;
// Helix coordinates
const r = radius - i * 1.5; // reduce radius for inner loops
const x = centerX + Math.cos(angle) * r;
const y = centerY + Math.sin(angle) * r + Math.sin(i * 3 + t) * spread;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
requestAnimationFrame(animate);
}
animate(0);
</script>
</body>
</html>