model output
Claude Sonnet 4.6

Spinners using Font Icons
A 0.73T 0.34
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>Rotating Arrow Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #1a1a1a;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    height: 100vh;
20    overflow: hidden;
21  }
22
23  .container {
24    position: absolute;
25    top: 35px;
26    left: 50%;
27    transform: translateX(-50%);
28    width: 60px;
29    height: 60px;
30  }
31
32  canvas {
33    display: block;
34  }
35</style>
36</head>
37<body>
38<div class="container">
39  <canvas id="arrowCanvas" width="60" height="60"></canvas>
40</div>
41
42<script>
43  const canvas = document.getElementById('arrowCanvas');
44  const ctx = canvas.getContext('2d');
45  const cx = 30, cy = 30, r = 22;
46  const lineWidth = 3.5;
47
48  let angle = 0;
49  const speed = (2 * Math.PI) / 120; // full rotation in ~2 seconds at 60fps
50
51  function drawRotatingArrow(rotation) {
52    ctx.clearRect(0, 0, canvas.width, canvas.height);
53    ctx.strokeStyle = 'white';
54    ctx.fillStyle = 'white';
55    ctx.lineWidth = lineWidth;
56    ctx.lineCap = 'round';
57
58    // Draw arc: almost full circle (about 300 degrees), gap at the arrow tip
59    const gapAngle = 0.35; // radians gap for arrow
60    const arcStart = rotation + gapAngle / 2;
61    const arcEnd = rotation + 2 * Math.PI - gapAngle / 2;
62
63    ctx.beginPath();
64    ctx.arc(cx, cy, r, arcStart, arcEnd, false);
65    ctx.stroke();
66
67    // Draw arrowhead at the end of the arc (arcEnd position)
68    const arrowAngle = arcEnd;
69    const ax = cx + r * Math.cos(arrowAngle);
70    const ay = cy + r * Math.sin(arrowAngle);
71
72    // Tangent direction at arcEnd (clockwise = perpendicular)
73    const tangentAngle = arrowAngle + Math.PI / 2;
74
75    const arrowSize = 7;
76    // Arrow points: tip at (ax, ay), going in tangent direction
77    const p1x = ax + arrowSize * Math.cos(tangentAngle - 0.5);
78    const p1y = ay + arrowSize * Math.sin(tangentAngle - 0.5);
79    const p2x = ax + arrowSize * Math.cos(tangentAngle + 0.5);
80    const p2y = ay + arrowSize * Math.sin(tangentAngle + 0.5);
81
82    ctx.beginPath();
83    ctx.moveTo(ax, ay);
84    ctx.lineTo(p1x, p1y);
85    ctx.lineTo(p2x, p2y);
86    ctx.closePath();
87    ctx.fill();
88  }
89
90  function animate() {
91    drawRotatingArrow(angle);
92    angle += speed;
93    requestAnimationFrame(animate);
94  }
95
96  animate();
97</script>
98</body>
99</html>