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.67T 0.21
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.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>