model output
Claude Sonnet 4.6

CSS3 loading animations
A 0.79T 0.33
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Red Spiral Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #0a0a0a;
12    width: 100vw;
13    height: 100vh;
14    overflow: hidden;
15    display: flex;
16    align-items: flex-start;
17    justify-content: center;
18  }
19
20  .container {
21    position: absolute;
22    top: 35px;
23    left: 50%;
24    transform: translateX(-50%);
25    width: 60px;
26    height: 60px;
27    display: flex;
28    align-items: center;
29    justify-content: center;
30  }
31
32  .glow {
33    position: absolute;
34    width: 60px;
35    height: 60px;
36    border-radius: 50%;
37    background: radial-gradient(circle, rgba(255,0,0,0.4) 0%, rgba(200,0,0,0.15) 50%, transparent 70%);
38    animation: glowPulse 1s ease-in-out infinite alternate;
39  }
40
41  @keyframes glowPulse {
42    0% { opacity: 0.4; transform: scale(0.9); }
43    100% { opacity: 1; transform: scale(1.1); }
44  }
45
46  canvas {
47    position: absolute;
48    top: 0;
49    left: 0;
50  }
51</style>
52</head>
53<body>
54<div class="container">
55  <div class="glow"></div>
56  <canvas id="c" width="60" height="60"></canvas>
57</div>
58
59<script>
60  const canvas = document.getElementById('c');
61  const ctx = canvas.getContext('2d');
62  const cx = 30, cy = 30;
63  
64  let angle = 0;
65  let time = 0;
66
67  function drawSpiral(rotation) {
68    ctx.clearRect(0, 0, 60, 60);
69    
70    // Pulsing brightness
71    const pulse = 0.7 + 0.3 * Math.sin(time * 0.08);
72    
73    // Outer ring (dim, dark red)
74    ctx.beginPath();
75    ctx.arc(cx, cy, 18, 0, Math.PI * 2);
76    ctx.strokeStyle = `rgba(120, 0, 0, ${0.4 * pulse})`;
77    ctx.lineWidth = 2;
78    ctx.stroke();
79
80    // Middle ring
81    ctx.beginPath();
82    ctx.arc(cx, cy, 13, 0, Math.PI * 2);
83    ctx.strokeStyle = `rgba(180, 0, 0, ${0.5 * pulse})`;
84    ctx.lineWidth = 1.5;
85    ctx.stroke();
86
87    // Rotating arc (bright red) - main spinner
88    const arcStart = rotation;
89    const arcEnd = rotation + Math.PI * 1.5;
90    
91    ctx.beginPath();
92    ctx.arc(cx, cy, 16, arcStart, arcEnd);
93    ctx.strokeStyle = `rgba(255, 20, 0, ${0.9 * pulse})`;
94    ctx.lineWidth = 3;
95    ctx.lineCap = 'round';
96    ctx.stroke();
97
98    // Inner rotating arc (opposite direction)
99    const arcStart2 = -rotation * 1.3;
100    const arcEnd2 = -rotation * 1.3 + Math.PI * 1.2;
101    
102    ctx.beginPath();
103    ctx.arc(cx, cy, 10, arcStart2, arcEnd2);
104    ctx.strokeStyle = `rgba(255, 10, 0, ${0.7 * pulse})`;
105    ctx.lineWidth = 2.5;
106    ctx.lineCap = 'round';
107    ctx.stroke();
108
109    // Center dot
110    ctx.beginPath();
111    ctx.arc(cx, cy, 3, 0, Math.PI * 2);
112    ctx.fillStyle = `rgba(255, 30, 0, ${0.8 * pulse})`;
113    ctx.fill();
114
115    // Bright highlight arc
116    const hStart = rotation * 0.7 + Math.PI;
117    const hEnd = hStart + Math.PI * 0.6;
118    ctx.beginPath();
119    ctx.arc(cx, cy, 16, hStart, hEnd);
120    ctx.strokeStyle = `rgba(255, 80, 0, ${0.6 * pulse})`;
121    ctx.lineWidth = 1.5;
122    ctx.lineCap = 'round';
123    ctx.stroke();
124  }
125
126  function animate() {
127    time++;
128    angle += 0.06;
129    drawSpiral(angle);
130    requestAnimationFrame(animate);
131  }
132
133  animate();
134</script>
135</body>
136</html>