1Looking at the animation, I can see:
21. A small rounded square/dot that morphs into a curved arc shape
32. The arc rotates continuously around the center
43. The color cycles through: red/coral → pink/purple → purple/blue → blue/purple → purple → pink/red → repeating
54. It's a spinner-like animation with a gradient color that shifts as it rotates
6
7The key insight is: it's a canvas-drawn arc that rotates 360° while the gradient colors cycle through a rainbow-like sequence (coral red → purple → blue → back).
8
9<!DOCTYPE html>
10<html>
11<head>
12<style>
13 body {
14 margin: 0;
15 background: #edeee9;
16 display: flex;
17 align-items: center;
18 justify-content: center;
19 height: 100vh;
20 overflow: hidden;
21 }
22 canvas {
23 display: block;
24 }
25</style>
26</head>
27<body>
28<canvas id="c" width="80" height="80"></canvas>
29<script>
30const canvas = document.getElementById('c');
31const ctx = canvas.getContext('2d');
32const cx = 40, cy = 40, r = 18, lw = 8;
33
34let angle = 0;
35
36// Color stops cycling: coral red -> pink -> purple -> blue/purple -> purple -> pink/red
37const colors = [
38 [255, 100, 90], // coral red
39 [255, 120, 150], // pink
40 [200, 80, 200], // purple
41 [120, 100, 220], // blue-purple
42 [100, 120, 240], // blue
43 [150, 80, 220], // purple
44 [220, 80, 180], // pink-purple
45 [255, 100, 90], // back to coral
46];
47
48function lerpColor(a, b, t) {
49 return [
50 Math.round(a[0] + (b[0]-a[0])*t),
51 Math.round(a[1] + (b[1]-a[1])*t),
52 Math.round(a[2] + (b[2]-a[2])*t),
53 ];
54}
55
56function getColor(t) {
57 // t in [0,1]
58 const n = colors.length - 1;
59 const scaled = t * n;
60 const i = Math.floor(scaled);
61 const f = scaled - i;
62 const a = colors[Math.min(i, n-1)];
63 const b = colors[Math.min(i+1, n)];
64 const c = lerpColor(a, b, f);
65 return `rgb(${c[0]},${c[1]},${c[2]})`;
66}
67
68function toRgba(t, alpha) {
69 const n = colors.length - 1;
70 const scaled = t * n;
71 const i = Math.floor(scaled);
72 const f = scaled - i;
73 const a = colors[Math.min(i, n-1)];
74 const b = colors[Math.min(i+1, n)];
75 const c = lerpColor(a, b, f);
76 return `rgba(${c[0]},${c[1]},${c[2]},${alpha})`;
77}
78
79function draw() {
80 ctx.clearRect(0, 0, 80, 80);
81
82 // Arc spans about 120 degrees
83 const arcSpan = Math.PI * 0.7;
84 const startAngle = angle;
85 const endAngle = angle + arcSpan;
86
87 // Draw arc with gradient
88 // Use multiple small segments to simulate gradient along arc
89 const steps = 40;
90 for (let i = 0; i < steps; i++) {
91 const t0 = i / steps;
92 const t1 = (i + 1) / steps;
93 const a0 = startAngle + t0 * arcSpan;
94 const a1 = startAngle + t1 * arcSpan;
95
96 // Color: head is bright, tail fades
97 const colorT = (angle / (Math.PI * 2)) % 1;
98 const segColorT = (colorT + t0 * 0.15) % 1;
99
100 // Tail fades out
101 const alpha = t0 < 0.1 ? t0 / 0.1 : 1;
102
103 ctx.beginPath();
104 ctx.arc(cx, cy, r, a0, a1);
105 ctx.strokeStyle = toRgba(segColorT, alpha);
106 ctx.lineWidth = lw;
107 ctx.lineCap = i === steps-1 ? 'round' : 'butt';
108 if (i === 0) ctx.lineCap = 'round';
109 ctx.stroke();
110 }
111
112 // Rotation speed: full cycle in ~1.2s
113 angle += (Math.PI * 2) / (60 * 1.2);
114 requestAnimationFrame(draw);
115}
116
117draw();
118</script>
119</body>
120</html>