model output
GPT-5.4

Only CSS: Joint Animation
A 0.77T 0.25
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>Rounded Bar Bend Animation</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --blue:#3f97c7;
11    --thickness:80px;
12    --len:265px;
13    --radius:40px;
14    --dur:1.8s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23  }
24
25  body{
26    display:grid;
27    place-items:center;
28  }
29
30  .stage{
31    position:relative;
32    width:1024px;
33    height:768px;
34    max-width:100vw;
35    max-height:100vh;
36    background:#fff;
37  }
38
39  .shape{
40    position:absolute;
41    left:50%;
42    top:50%;
43    width:0;
44    height:0;
45    transform:translate(-70px, 45px);
46  }
47
48  .arm{
49    position:absolute;
50    width:var(--len);
51    height:var(--thickness);
52    background:var(--blue);
53    border-radius:var(--radius);
54    left:0;
55    top:0;
56    transform-origin:40px 40px;
57    animation-duration:var(--dur);
58    animation-timing-function:cubic-bezier(.42,0,.2,1);
59    animation-iteration-count:infinite;
60    animation-direction:alternate;
61    animation-fill-mode:both;
62  }
63
64  .arm.h{
65    transform-origin:40px 40px;
66    animation-name:hArm;
67  }
68
69  .arm.v{
70    transform-origin:40px 40px;
71    animation-name:vArm;
72  }
73
74  @keyframes hArm{
75    0%{
76      transform:translate(-40px,-40px) rotate(0deg);
77    }
78    18%{
79      transform:translate(-40px,-40px) rotate(0deg);
80    }
81    55%{
82      transform:translate(-40px,-40px) rotate(0deg);
83    }
84    72%{
85      transform:translate(-40px,-40px) rotate(0deg);
86    }
87    100%{
88      transform:translate(-40px,-40px) rotate(0deg);
89    }
90  }
91
92  @keyframes vArm{
93    0%{
94      transform:translate(-40px,-40px) rotate(0deg);
95    }
96    18%{
97      transform:translate(-40px,-40px) rotate(-22deg);
98    }
99    42%{
100      transform:translate(-40px,-40px) rotate(-74deg);
101    }
102    55%{
103      transform:translate(-40px,-40px) rotate(-90deg);
104    }
105    72%{
106      transform:translate(-40px,-40px) rotate(-78deg);
107    }
108    100%{
109      transform:translate(-40px,-40px) rotate(-28deg);
110    }
111  }
112
113  @media (max-aspect-ratio: 4/3){
114    .stage{ width:100vw; height:75vw; }
115  }
116  @media (min-aspect-ratio: 4/3){
117    .stage{ width:133.333vh; height:100vh; }
118  }
119</style>
120</head>
121<body>
122  <div class="stage">
123    <div class="shape" aria-hidden="true">
124      <div class="arm h"></div>
125      <div class="arm v"></div>
126    </div>
127  </div>
128</body>
129</html>