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.77T 0.11
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 Dots 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        .dot-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        @keyframes pulse {
32            0%, 100% {
33                transform: scale(0.5);
34                opacity: 0.5;
35            }
36            50% {
37                transform: scale(1.2);
38                opacity: 1;
39            }
40        }
41        .dot:nth-child(1) {
42            top: 0;
43            left: 0;
44            animation-delay: 0s;
45        }
46        .dot:nth-child(2) {
47            top: 0;
48            left: 10px;
49            animation-delay: 0.2s;
50        }
51        .dot:nth-child(3) {
52            top: 0;
53            left: 20px;
54            animation-delay: 0.4s;
55        }
56        .dot:nth-child(4) {
57            top: 10px;
58            left: 10px;
59            animation-delay: 0.6s;
60        }
61        .dot:nth-child(5) {
62            top: 20px;
63            left: 0;
64            animation-delay: 0.8s;
65        }
66        .dot:nth-child(6) {
67            top: 20px;
68            left: 10px;
69            animation-delay: 1.0s;
70        }
71        .dot:nth-child(7) {
72            top: 20px;
73            left: 20px;
74            animation-delay: 1.2s;
75        }
76        .dot:nth-child(8) {
77            top: 10px;
78            left: 20px;
79            animation-delay: 1.4s;
80        }
81        .dot:nth-child(9) {
82            top: 0;
83            left: 20px;
84            animation-delay: 1.6s;
85        }
86        .dot:nth-child(10) {
87            top: 0;
88            left: 10px;
89            animation-delay: 1.8s;
90        }
91    </style>
92</head>
93<body>
94    <div class="dot-container">
95        <div class="dot"></div>
96        <div class="dot"></div>
97        <div class="dot"></div>
98        <div class="dot"></div>
99        <div class="dot"></div>
100        <div class="dot"></div>
101        <div class="dot"></div>
102        <div class="dot"></div>
103        <div class="dot"></div>
104        <div class="dot"></div>
105    </div>
106</body>
107</html>