animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Loaders (WIP)

model output

Qwen3-VL-8B-Instruct

Loaders (WIP)

A 0.85T 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: #e64a19;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .square {
17    width: 20px;
18    height: 20px;
19    background-color: #fff;
20    position: relative;
21    animation: pulse 1s ease-in-out;
22  }
23  .dot {
24    width: 4px;
25    height: 4px;
26    background-color: #fff;
27    border-radius: 50%;
28    position: absolute;
29    top: 0;
30    left: 0;
31    animation: dotPulse 1s ease-in-out;
32  }
33  .dot:nth-child(2) {
34    left: 20px;
35    animation-delay: 0.2s;
36  }
37  @keyframes pulse {
38    0% {
39      transform: scale(0.5);
40    }
41    50% {
42      transform: scale(1.2);
43    }
44    100% {
45      transform: scale(1);
46    }
47  }
48  @keyframes dotPulse {
49    0% {
50      transform: scale(0.5);
51    }
52    50% {
53      transform: scale(1.2);
54    }
55    100% {
56      transform: scale(1);
57    }
58  }
59</style>
60</head>
61<body>
62  <div class="square">
63    <div class="dot"></div>
64    <div class="dot"></div>
65  </div>
66</body>
67</html>