animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to SVG Loading icons

model output

Qwen3-VL-8B-Instruct

SVG Loading icons

A 0.75T 0.17
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: #222;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            position: relative;
18            width: 40px;
19            height: 40px;
20        }
21        .loader::before,
22        .loader::after {
23            content: '';
24            position: absolute;
25            top: 0;
26            left: 0;
27            width: 4px;
28            height: 40px;
29            background-color: #ff6b00;
30            animation: pulse 1.5s infinite ease-in-out;
31        }
32        .loader::before {
33            animation-delay: -0.5s;
34        }
35        @keyframes pulse {
36            0%, 100% {
37                transform: scaleY(0.5);
38            }
39            50% {
40                transform: scaleY(1.5);
41            }
42        }
43    </style>
44</head>
45<body>
46    <div class="loader"></div>
47</body>
48</html>