model output
GPT-5.4

Only CSS: Joint Animation
A 0.87T 0.31
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>Pivoting Bar Animation</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --bar:#3f95c3;
11    --dot:#ffd400;
12    --guide:#777;
13    --w:300px;
14    --h:80px;
15    --dotSize:20px;
16    --pivotX:40px;
17    --pivotY:40px;
18    --duration:2.2s;
19  }
20
21  html,body{
22    margin:0;
23    width:100%;
24    height:100%;
25    background:var(--bg);
26    overflow:hidden;
27    font-family:sans-serif;
28  }
29
30  .stage{
31    position:relative;
32    width:100vw;
33    height:100vh;
34  }
35
36  .wrap{
37    position:absolute;
38    left:50%;
39    top:50%;
40    width:var(--w);
41    height:var(--h);
42    transform:translate(-50%,-50%);
43  }
44
45  .guide{
46    position:absolute;
47    inset:0;
48    border:1px dashed var(--guide);
49    box-sizing:border-box;
50    opacity:.9;
51  }
52
53  .bar{
54    position:absolute;
55    left:0;
56    top:0;
57    width:var(--w);
58    height:var(--h);
59    background:var(--bar);
60    transform-origin:var(--pivotX) var(--pivotY);
61    animation: swing var(--duration) ease-in-out infinite;
62  }
63
64  .dot{
65    position:absolute;
66    width:var(--dotSize);
67    height:var(--dotSize);
68    left:calc(var(--pivotX) - var(--dotSize)/2);
69    top:calc(var(--pivotY) - var(--dotSize)/2);
70    border-radius:50%;
71    background:var(--dot);
72    box-shadow:0 0 0 4px #fff inset, 0 0 0 1px rgba(0,0,0,.08);
73    pointer-events:none;
74  }
75
76  @keyframes swing{
77    0%   { transform:rotate(0deg); }
78    18%  { transform:rotate(-20deg); }
79    34%  { transform:rotate(-74deg); }
80    50%  { transform:rotate(-82deg); }
81    66%  { transform:rotate(-72deg); }
82    84%  { transform:rotate(-22deg); }
83    100% { transform:rotate(0deg); }
84  }
85</style>
86</head>
87<body>
88  <div class="stage">
89    <div class="wrap">
90      <div class="guide"></div>
91      <div class="bar">
92        <div class="dot"></div>
93      </div>
94    </div>
95  </div>
96</body>
97</html>