animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Animated Concepts #3

model output

Qwen3-VL-8B-Instruct

Animated Concepts #3

A 0.63T 0.22
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: #121212;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            width: 40px;
18            height: 40px;
19            position: relative;
20        }
21        .line {
22            position: absolute;
23            width: 2px;
24            height: 100%;
25            background: linear-gradient(to right, #ff6b6b, #ff8e53);
26            top: 0;
27            left: 0;
28            transform-origin: center;
29            animation: pulse 1.5s ease-in-out infinite;
30        }
31        .line:nth-child(1) {
32            animation-delay: 0s;
33            transform: rotate(0deg);
34        }
35        .line:nth-child(2) {
36            animation-delay: 0.2s;
37            transform: rotate(180deg);
38        }
39        .line:nth-child(3) {
40            animation-delay: 0.4s;
41            transform: rotate(360deg);
42        }
43        @keyframes pulse {
44            0%, 100% {
45                transform: scale(1);
46            }
47            50% {
48                transform: scale(1.2);
49            }
50        }
51    </style>
52</head>
53<body>
54    <div class="loader">
55        <div class="line"></div>
56        <div class="line"></div>
57        <div class="line"></div>
58    </div>
59</body>
60</html>