model output
Claude Sonnet 4.6

Animated Concepts #3
A 0.86T 0.26
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>Spinner Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #2a2a2a;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    overflow: hidden;
17  }
18
19  .spinner-container {
20    position: relative;
21    width: 80px;
22    height: 80px;
23  }
24
25  canvas {
26    position: absolute;
27    top: 0;
28    left: 0;
29  }
30</style>
31</head>
32<body>
33<div class="spinner-container">
34  <canvas id="c" width="80" height="80"></canvas>
35</div>
36
37<script>
38  const canvas = document.getElementById('c');
39  const ctx = canvas.getContext('2d');
40  const cx = 40, cy = 40;
41  const outerR = 32;
42  const innerR = 10;
43  const color = '#e8756a';
44  const strokeW = 2;
45
46  // The outer arc: a ~270deg arc that rotates continuously
47  // The inner circle: small circle that also rotates (dot on a smaller orbit)
48  // Looking at frames: there's an outer arc (~270deg) and a small inner circle
49  // Both seem to rotate together - the whole thing spins
50  // The arc length stays roughly constant (~270deg visible)
51  // It looks like a spinner with a fixed arc length rotating
52
53  let angle = 0; // rotation angle in radians
54  const arcLength = Math.PI * 1.5; // ~270 degrees
55  const dotOrbitR = 14; // orbit radius of the small dot
56
57  function draw(timestamp) {
58    ctx.clearRect(0, 0, 80, 80);
59
60    // Rotate at ~1 revolution per 1.5 seconds
61    angle = (timestamp / 1500) * Math.PI * 2;
62
63    // Draw outer arc
64    ctx.beginPath();
65    ctx.arc(cx, cy, outerR, angle, angle + arcLength);
66    ctx.strokeStyle = color;
67    ctx.lineWidth = strokeW;
68    ctx.lineCap = 'round';
69    ctx.stroke();
70
71    // Draw inner small circle (dot) - orbits at a smaller radius
72    // The dot appears to be at a fixed position relative to the arc start
73    const dotAngle = angle + arcLength * 0.15;
74    const dotX = cx + Math.cos(dotAngle) * dotOrbitR;
75    const dotY = cy + Math.sin(dotAngle) * dotOrbitR;
76
77    ctx.beginPath();
78    ctx.arc(dotX, dotY, 4, 0, Math.PI * 2);
79    ctx.strokeStyle = color;
80    ctx.lineWidth = strokeW;
81    ctx.stroke();
82
83    requestAnimationFrame(draw);
84  }
85
86  requestAnimationFrame(draw);
87</script>
88</body>
89</html>