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.76T 0.14
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            width: 40px;
18            height: 40px;
19            position: relative;
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.2s;
34        }
35        .loader::after {
36            animation-delay: 0.4s;
37        }
38        @keyframes pulse {
39            0%, 100% {
40                transform: scaleY(1);
41            }
42            50% {
43                transform: scaleY(0.5);
44            }
45        }
46    </style>
47</head>
48<body>
49    <div class="loader"></div>
50</body>
51</html>