model output
Claude Sonnet 4.6

flat loading animate
A 0.81T 0.26
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5  * { margin: 0; padding: 0; box-sizing: border-box; }
6  body { background: white; display: flex; justify-content: center; align-items: center; height: 100vh; }
7  canvas { display: block; }
8</style>
9</head>
10<body>
11<canvas id="c" width="1024" height="768"></canvas>
12<script>
13const canvas = document.getElementById('c');
14const ctx = canvas.getContext('2d');
15const cx = 512, cy = 384, r = 65;
16
17const colors = [
18  { t: 0,    color: '#FFBA6B', start: -Math.PI,     end: Math.PI },
19  { t: 0.2,  color: '#00BFA5', start: -Math.PI/2,   end: Math.PI/2 },
20  { t: 0.4,  color: '#4A6274', start: 0,             end: Math.PI/2 },
21  { t: 0.55, color: '#F96B5B', start: 0,             end: Math.PI },
22  { t: 0.75, color: '#FFBA6B', start: -Math.PI,      end: Math.PI },
23  { t: 1.0,  color: '#FFBA6B', start: -Math.PI,      end: Math.PI },
24];
25
26function lerp(a, b, t) { return a + (b - a) * t; }
27
28function lerpColor(c1, c2, t) {
29  const parse = c => [parseInt(c.slice(1,3),16), parseInt(c.slice(3,5),16), parseInt(c.slice(5,7),16)];
30  const [r1,g1,b1] = parse(c1);
31  const [r2,g2,b2] = parse(c2);
32  return `rgb(${Math.round(lerp(r1,r2,t))},${Math.round(lerp(g1,g2,t))},${Math.round(lerp(b1,b2,t))})`;
33}
34
35const duration = 3000;
36let start = null;
37
38function easeInOut(t) { return t < 0.5 ? 2*t*t : -1+(4-2*t)*t; }
39
40function getState(progress) {
41  for (let i = 0; i < colors.length - 1; i++) {
42    const a = colors[i], b = colors[i+1];
43    if (progress >= a.t && progress <= b.t) {
44      const local = (progress - a.t) / (b.t - a.t);
45      const e = easeInOut(local);
46      return {
47        color: lerpColor(a.color, b.color, e),
48        start: lerp(a.start, b.start, e),
49        end: lerp(a.end, b.end, e)
50      };
51    }
52  }
53  return { color: colors[colors.length-1].color, start: colors[colors.length-1].start, end: colors[colors.length-1].end };
54}
55
56function draw(ts) {
57  if (!start) start = ts;
58  let elapsed = (ts - start) % (duration * 1.5);
59  let progress = Math.min(elapsed / duration, 1);
60
61  ctx.clearRect(0, 0, canvas.width, canvas.height);
62
63  const state = getState(progress);
64
65  ctx.beginPath();
66  ctx.moveTo(cx, cy);
67  ctx.arc(cx, cy, r, state.start, state.end);
68  ctx.closePath();
69  ctx.fillStyle = state.color;
70  ctx.fill();
71
72  requestAnimationFrame(draw);
73}
74
75requestAnimationFrame(draw);
76</script>
77</body>
78</html>