animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Exploring Bourbon

model output

Qwen3-VL-8B-Instruct

Exploring Bourbon

A 0.63T 0.13
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>Animation</title>
7    <style>
8        body {
9            background-color: #e6d6d6;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .spinner {
17            width: 50px;
18            height: 50px;
19            position: relative;
20        }
21        .spinner::before {
22            content: "";
23            position: absolute;
24            width: 10px;
25            height: 10px;
26            background-color: white;
27            border-radius: 50%;
28            top: 50%;
29            left: 50%;
30            transform: translate(-50%, -50%);
31            animation: spin 1.5s ease-in-out infinite;
32        }
33        .spinner::after {
34            content: "";
35            position: absolute;
36            width: 10px;
37            height: 10px;
38            background-color: white;
39            border-radius: 50%;
40            top: 50%;
41            left: 50%;
42            transform: translate(-50%, -50%);
43            animation: spin 1.5s ease-in-out infinite;
44            animation-delay: 0.2s;
45        }
46        .spinner::before, .spinner::after {
47            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
48        }
49        @keyframes spin {
50            0%, 100% {
51                transform: translate(-50%, -50%) rotate(0deg);
52            }
53            50% {
54                transform: translate(-50%, -50%) rotate(180deg);
55            }
56        }
57    </style>
58</head>
59<body>
60    <div class="spinner"></div>
61</body>
62</html>