model output
Claude Sonnet 4.6

Only CSS: Joint Animation
A 0.80T 0.33
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5  * { margin: 0; padding: 0; box-sizing: border-box; }
6  body {
7    width: 1024px;
8    height: 768px;
9    background: white;
10    display: flex;
11    align-items: center;
12    justify-content: center;
13    overflow: hidden;
14  }
15  .container {
16    position: relative;
17    width: 200px;
18    height: 200px;
19    animation: spin 2s linear infinite;
20  }
21  canvas {
22    position: absolute;
23    top: 50%;
24    left: 50%;
25    transform: translate(-50%, -50%);
26  }
27</style>
28</head>
29<body>
30<canvas id="c" width="1024" height="768"></canvas>
31<script>
32const canvas = document.getElementById('c');
33const ctx = canvas.getContext('2d');
34
35let angle = 0;
36const cx = 620, cy = 383;
37const armLen = 220;
38const thickness = 38;
39const color = '#3d9dc7';
40
41function drawRoundedLine(x1, y1, x2, y2, width) {
42  ctx.beginPath();
43  ctx.moveTo(x1, y1);
44  ctx.lineTo(x2, y2);
45  ctx.strokeStyle = color;
46  ctx.lineWidth = width;
47  ctx.lineCap = 'round';
48  ctx.lineJoin = 'round';
49  ctx.stroke();
50}
51
52function drawChevron(cx, cy, angle) {
53  // Chevron: two arms meeting at a point
54  // The chevron opens downward at angle=0
55  // Left arm goes from tip to upper-left
56  // Right arm goes from tip to upper-right
57  const halfAngle = Math.PI / 4; // 45 degrees opening
58  
59  // Tip of chevron
60  const tipX = cx;
61  const tipY = cy + armLen * 0.4;
62  
63  // Left end
64  const leftX = cx - armLen * Math.cos(halfAngle) * 0.7;
65  const leftY = cy - armLen * Math.sin(halfAngle) * 0.7;
66  
67  // Right end
68  const rightX = cx + armLen * Math.cos(halfAngle) * 0.7;
69  const rightY = cy - armLen * Math.sin(halfAngle) * 0.7;
70  
71  ctx.save();
72  ctx.translate(cx, cy);
73  ctx.rotate(angle);
74  ctx.translate(-cx, -cy);
75  
76  ctx.beginPath();
77  ctx.moveTo(leftX, leftY);
78  ctx.lineTo(tipX, tipY);
79  ctx.lineTo(rightX, rightY);
80  ctx.strokeStyle = color;
81  ctx.lineWidth = thickness;
82  ctx.lineCap = 'round';
83  ctx.lineJoin = 'round';
84  ctx.stroke();
85  
86  ctx.restore();
87}
88
89function animate() {
90  ctx.clearRect(0, 0, canvas.width, canvas.height);
91  drawChevron(cx, cy, angle);
92  angle += 0.03;
93  requestAnimationFrame(animate);
94}
95
96animate();
97</script>
98</body>
99</html>