code…
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golden Spiral with Circles</title>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: white;
}
canvas {
border: 2px solid white;
}
</style>
</head>
<body>
<canvas id="spiralCanvas" width="1600" height="1600"></canvas>
<script>
const canvas = document.getElementById('spiralCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 1600;
canvas.height = 1600;
const PHI = (1 + Math.sqrt(5)) / 2; // Golden Ratio (PHI)
// Function to draw the spiral with circles
function drawGoldenSpiral() {
const count = 1000; // Number of iterations
const width = canvas.width;
const height = canvas.height;
// Center the canvas
ctx.translate(width / 2, height / 2);
for (let i = 0; i < count; i++) {
const percent = i / count;
const size = 14.0 * percent; // Circle size increases
const r = 380.0 * percent; // Radius increases
const t = i * Math.PI * 2 * PHI; // Angle based on golden ratio
const x = Math.cos(t) * r; // X position
const y = Math.sin(t) * r; // Y position
// Draw the circle at the calculated position
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2); // Draw circle
ctx.fillStyle = `hsl(${(i / count) * 360}, 100%, 50%)`; // Color variation
ctx.fill();
}
}
// Draw the spiral
drawGoldenSpiral();
</script>
</body></html>
LoveAdvocate 