animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Responsive City Drone View Black

model output

Qwen3-VL-8B-Instruct

Only CSS: Responsive City Drone View Black

A 0.57T 0.32
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>Spinning Bars Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: black;
12            overflow: hidden;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17        }
18        .container {
19            position: relative;
20            width: 200px;
21            height: 200px;
22        }
23        .bar {
24            position: absolute;
25            width: 10px;
26            height: 100px;
27            background: linear-gradient(to bottom, #1a1a1a, #000);
28            border-radius: 5px;
29            transform-origin: bottom center;
30            animation: spin 4s linear infinite;
31        }
32        .bar:nth-child(1) {
33            top: 50px;
34            left: 50px;
35            transform: rotate(0deg);
36            animation-delay: 0s;
37        }
38        .bar:nth-child(2) {
39            top: 50px;
40            right: 50px;
41            transform: rotate(45deg);
42            animation-delay: 0.2s;
43        }
44        .bar:nth-child(3) {
45            bottom: 50px;
46            right: 50px;
47            transform: rotate(90deg);
48            animation-delay: 0.4s;
49        }
50        .bar:nth-child(4) {
51            bottom: 50px;
52            left: 50px;
53            transform: rotate(135deg);
54            animation-delay: 0.6s;
55        }
56        .bar:nth-child(5) {
57            top: 50px;
58            left: 50px;
59            transform: rotate(180deg);
60            animation-delay: 0.8s;
61        }
62        .bar:nth-child(6) {
63            top: 50px;
64            right: 50px;
65            transform: rotate(225deg);
66            animation-delay: 1.0s;
67        }
68        .bar:nth-child(7) {
69            bottom: 50px;
70            right: 50px;
71            transform: rotate(270deg);
72            animation-delay: 1.2s;
73        }
74        .bar:nth-child(8) {
75            bottom: 50px;
76            left: 50px;
77            transform: rotate(315deg);
78            animation-delay: 1.4s;
79        }
80        @keyframes spin {
81            0% {
82                transform: rotate(0deg);
83            }
84            100% {
85                transform: rotate(360deg);
86            }
87        }
88    </style>
89</head>
90<body>
91    <div class="container">
92        <div class="bar"></div>
93        <div class="bar"></div>
94        <div class="bar"></div>
95        <div class="bar"></div>
96        <div class="bar"></div>
97        <div class="bar"></div>
98        <div class="bar"></div>
99        <div class="bar"></div>
100    </div>
101</body>
102</html>