model output
Claude Sonnet 4.6

Simple Spinner
A 0.83T 0.25
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-color: #1a9070;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    width: 100vw;
16    height: 100vh;
17    overflow: hidden;
18  }
19
20  .loader {
21    position: relative;
22    width: 40px;
23    height: 40px;
24  }
25
26  canvas {
27    display: block;
28  }
29</style>
30</head>
31<body>
32<canvas id="c"></canvas>
33<script>
34  const canvas = document.getElementById('c');
35  const ctx = canvas.getContext('2d');
36  canvas.width = 60;
37  canvas.height = 60;
38  canvas.style.position = 'absolute';
39  canvas.style.left = '50%';
40  canvas.style.top = '50%';
41  canvas.style.transform = 'translate(-50%, -50%)';
42
43  // The animation shows a crescent/arc shape that flips between
44  // concave-up (smile) and concave-down (arch) positions
45  // It oscillates with a rotation animation
46
47  let startTime = null;
48  const duration = 800; // ms per cycle
49
50  function drawArc(rotation) {
51    ctx.clearRect(0, 0, 60, 60);
52    ctx.save();
53    ctx.translate(30, 30);
54    ctx.rotate(rotation);
55    
56    // Draw a thick arc (crescent shape)
57    ctx.beginPath();
58    ctx.arc(0, 0, 16, Math.PI, 0, false); // outer arc
59    ctx.arc(0, 0, 10, 0, Math.PI, true);  // inner arc
60    ctx.closePath();
61    ctx.fillStyle = 'white';
62    ctx.fill();
63    
64    ctx.restore();
65  }
66
67  function animate(timestamp) {
68    if (!startTime) startTime = timestamp;
69    const elapsed = (timestamp - startTime) % (duration * 2);
70    
71    let rotation;
72    if (elapsed < duration) {
73      // First half: from 0 (smile/concave-up) to PI (arch/concave-down)
74      const t = elapsed / duration;
75      // ease in-out
76      const eased = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
77      rotation = eased * Math.PI;
78    } else {
79      // Second half: from PI back to 2*PI (= 0)
80      const t = (elapsed - duration) / duration;
81      const eased = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
82      rotation = Math.PI + eased * Math.PI;
83    }
84    
85    drawArc(rotation);
86    requestAnimationFrame(animate);
87  }
88
89  requestAnimationFrame(animate);
90</script>
91</body>
92</html>