animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Motion Table - Solid Rotation

model output

Qwen3-VL-8B-Instruct

Motion Table - Solid Rotation

A 0.63T 0.24
compare with ground truth →
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>