← back to Motion Table - Solid Rotationcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Motion Table - Solid Rotation
A 0.63T 0.24
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>Circle Animation</title>
7 <style>
8 body {
9 background-color: #333;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .container {
17 position: relative;
18 width: 200px;
19 height: 200px;
20 }
21 .circle {
22 position: absolute;
23 width: 100%;
24 height: 100%;
25 border: 2px solid white;
26 border-radius: 50%;
27 animation: expand 2s ease-in-out forwards;
28 }
29 .lines {
30 position: absolute;
31 width: 100%;
32 height: 100%;
33 transform: translate(-50%, -50%);
34 animation: rotate 4s linear infinite;
35 }
36 .line {
37 position: absolute;
38 width: 1px;
39 height: 100%;
40 background-color: white;
41 transform-origin: center;
42 animation: draw 4s ease-in-out forwards;
43 }
44 @keyframes expand {
45 0% {
46 transform: scale(0.5);
47 }
48 100% {
49 transform: scale(1);
50 }
51 }
52 @keyframes rotate {
53 0% {
54 transform: rotate(0deg);
55 }
56 100% {
57 transform: rotate(360deg);
58 }
59 }
60 @keyframes draw {
61 0% {
62 transform: rotate(0deg);
63 opacity: 0;
64 }
65 100% {
66 transform: rotate(360deg);
67 opacity: 1;
68 }
69 }
70 </style>
71</head>
72<body>
73 <div class="container">
74 <div class="circle"></div>
75 <div class="lines">
76 <div class="line" style="transform: rotate(0deg);"></div>
77 <div class="line" style="transform: rotate(60deg);"></div>
78 <div class="line" style="transform: rotate(120deg);"></div>
79 <div class="line" style="transform: rotate(180deg);"></div>
80 <div class="line" style="transform: rotate(240deg);"></div>
81 <div class="line" style="transform: rotate(300deg);"></div>
82 </div>
83 </div>
84</body>
85</html>