model output
Qwen3-VL-8B-Instruct

Only CSS: Joint Animation
A 0.64T 0.23
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>Animation</title>
7<style>
8  @keyframes morph {
9    0% {
10      transform: translateX(0) rotate(0deg);
11      stroke-dasharray: 0, 200;
12      stroke-dashoffset: 0;
13    }
14    50% {
15      transform: translateX(100px) rotate(45deg);
16      stroke-dasharray: 200, 200;
17      stroke-dashoffset: -100;
18    }
19    100% {
20      transform: translateX(200px) rotate(90deg);
21      stroke-dasharray: 200, 200;
22      stroke-dashoffset: -200;
23    }
24  }
25
26  .shape {
27    width: 100px;
28    height: 100px;
29    background: #3498db;
30    position: relative;
31    animation: morph 3s ease-in-out forwards;
32  }
33
34  .shape::before {
35    content: "";
36    position: absolute;
37    top: 0;
38    left: 0;
39    width: 100%;
40    height: 100%;
41    background: #3498db;
42    border-radius: 50%;
43    transform: translateX(-50%) translateY(-50%);
44    animation: morph 3s ease-in-out forwards;
45  }
46</style>
47</head>
48<body>
49  <div class="shape"></div>
50</body>
51</html>