animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Nice spinny stuff

model output

Qwen3-VL-8B-Instruct

Nice spinny stuff

A 0.87T 0.12
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>Pink Dot Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: white;
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: 100px;
21            height: 100px;
22        }
23        .dot {
24            position: absolute;
25            width: 8px;
26            height: 8px;
27            background-color: #ffccdd;
28            border-radius: 50%;
29            animation: pulse 2s infinite ease-in-out;
30        }
31        .dot:nth-child(1) {
32            top: 10px;
33            left: 10px;
34            animation-delay: 0s;
35        }
36        .dot:nth-child(2) {
37            top: 10px;
38            left: 30px;
39            animation-delay: 0.2s;
40        }
41        .dot:nth-child(3) {
42            top: 30px;
43            left: 30px;
44            animation-delay: 0.4s;
45        }
46        .dot:nth-child(4) {
47            top: 30px;
48            left: 10px;
49            animation-delay: 0.6s;
50        }
51        .dot:nth-child(5) {
52            top: 10px;
53            left: 50px;
54            animation-delay: 0.8s;
55        }
56        .dot:nth-child(6) {
57            top: 30px;
58            left: 50px;
59            animation-delay: 1.0s;
60        }
61        .dot:nth-child(7) {
62            top: 50px;
63            left: 50px;
64            animation-delay: 1.2s;
65        }
66        .dot:nth-child(8) {
67            top: 50px;
68            left: 30px;
69            animation-delay: 1.4s;
70        }
71        .dot:nth-child(9) {
72            top: 50px;
73            left: 10px;
74            animation-delay: 1.6s;
75        }
76        .dot:nth-child(10) {
77            top: 30px;
78            left: 10px;
79            animation-delay: 1.8s;
80        }
81        .dot:nth-child(11) {
82            top: 10px;
83            left: 50px;
84            animation-delay: 2.0s;
85        }
86        .dot:nth-child(12) {
87            top: 30px;
88            left: 10px;
89            animation-delay: 2.2s;
90        }
91        @keyframes pulse {
92            0%, 100% {
93                transform: scale(1);
94                opacity: 0.5;
95            }
96            50% {
97                transform: scale(1.2);
98                opacity: 1;
99            }
100        }
101    </style>
102</head>
103<body>
104    <div class="container">
105        <div class="dot"></div>
106        <div class="dot"></div>
107        <div class="dot"></div>
108        <div class="dot"></div>
109        <div class="dot"></div>
110        <div class="dot"></div>
111        <div class="dot"></div>
112        <div class="dot"></div>
113        <div class="dot"></div>
114        <div class="dot"></div>
115        <div class="dot"></div>
116        <div class="dot"></div>
117    </div>
118</body>
119</html>