const currentGradient = ctx.createRadialGradient(centerX, centerY, 10, centerX, centerY, pulseRadius);
currentGradient.addColorStop(0, phases[currentPhase].color);
currentGradient.addColorStop(0.95, '#000011');
ctx.fillStyle = currentGradient;
ctx.beginPath();
ctx.arc(centerX, centerY, pulseRadius - 10, 0, Math.PI * 2);
ctx.fill();

// Phase borders and names
phases.forEach((phase, i) => {
    const angle = (i / phases.length) * 2 * Math.PI;
    const x = centerX + phase.radius * Math.cos(angle);
    const y = centerY - phase.radius * Math.sin(angle);
    ctx.fillStyle = '#444';
    ctx.font = '16px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(phase.name, x, y);
});
The code draws a pulsing center circle that changes color based on which phase we're in. It also draws the names of each phase around the circle. The gradient background represents transformation. The animation updates every frame and the state evolves over time.

The 4 phases are:
- Reflect: deep red, symbolizing introspection
- Release: orange, opening up
- Realign: green, finding balance  
- Recreate: blue, envisioning what's next

I chose these colors because they move through the spectrum