model output
Claude Sonnet 4.6

Thinking about SVG-preloaders
A 0.78T 0.22
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>Loading Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #0a0a0a;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18
19  body::before {
20    content: '';
21    position: fixed;
22    inset: 0;
23    background-image: 
24      repeating-linear-gradient(
25        45deg,
26        transparent,
27        transparent 10px,
28        rgba(255,255,255,0.015) 10px,
29        rgba(255,255,255,0.015) 11px
30      ),
31      repeating-linear-gradient(
32        -45deg,
33        transparent,
34        transparent 10px,
35        rgba(255,255,255,0.015) 10px,
36        rgba(255,255,255,0.015) 11px
37      );
38    pointer-events: none;
39  }
40
41  .spinner {
42    position: relative;
43    width: 80px;
44    height: 80px;
45    animation: rotate 1.5s linear infinite;
46  }
47
48  .dot {
49    position: absolute;
50    width: 8px;
51    height: 8px;
52    border-radius: 50%;
53    top: 50%;
54    left: 50%;
55    transform-origin: 0 0;
56  }
57
58  @keyframes rotate {
59    from { transform: rotate(0deg); }
60    to { transform: rotate(360deg); }
61  }
62</style>
63</head>
64<body>
65<div class="spinner" id="spinner"></div>
66
67<script>
68  const spinner = document.getElementById('spinner');
69  const numDots = 16;
70  const radius = 28;
71
72  // Color gradient: bright yellow-green -> teal -> dark (fading tail)
73  // The "head" is bright orange/yellow, transitioning through green to teal, then fading to dark
74  const colors = [
75    '#f5a800', // brightest - head (orange/yellow)
76    '#e09000',
77    '#c07800',
78    '#8a6000',
79    '#4a4000',
80    '#1a2a10',
81    '#0a1a0a',
82    '#051005',
83    '#051510',
84    '#0a2520',
85    '#103530',
86    '#1a4a3a',
87    '#206040',
88    '#2a7a50',
89    '#4aaa60',
90    '#7acc70', // tail end - bright green
91  ];
92
93  for (let i = 0; i < numDots; i++) {
94    const dot = document.createElement('div');
95    dot.classList.add('dot');
96    
97    // Angle: distribute dots around circle
98    // dot 0 is the "head" (brightest), subsequent dots are the tail
99    const angle = (i / numDots) * 2 * Math.PI - Math.PI / 2;
100    
101    const x = Math.cos(angle) * radius;
102    const y = Math.sin(angle) * radius;
103    
104    dot.style.transform = `translate(${x}px, ${y}px)`;
105    dot.style.marginLeft = '-4px';
106    dot.style.marginTop = '-4px';
107    dot.style.backgroundColor = colors[i];
108    
109    // Size variation: head is bigger, tail fades smaller
110    const sizeFactor = 1 - (i / numDots) * 0.4;
111    const size = 8 * sizeFactor;
112    dot.style.width = size + 'px';
113    dot.style.height = size + 'px';
114    dot.style.marginLeft = (-size/2) + 'px';
115    dot.style.marginTop = (-size/2) + 'px';
116    
117    spinner.appendChild(dot);
118  }
119</script>
120</body>
121</html>