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.60T 0.26
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>Rotating Logo 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  .logo {
17    width: 80px;
18    height: 80px;
19    position: relative;
20    animation: rotate 2s linear infinite;
21  }
22  .logo::before {
23    content: "";
24    position: absolute;
25    top: 0;
26    left: 0;
27    width: 100%;
28    height: 100%;
29    border-radius: 50%;
30    background-color: white;
31    z-index: 1;
32  }
33  .logo::after {
34    content: "";
35    position: absolute;
36    top: 50%;
37    left: 50%;
38    transform: translate(-50%, -50%);
39    width: 40px;
40    height: 40px;
41    border-radius: 50%;
42    background-color: #e64a19;
43    z-index: 2;
44  }
45  .logo .segment {
46    position: absolute;
47    width: 40px;
48    height: 40px;
49    background-color: white;
50    border-radius: 50%;
51    top: 50%;
52    left: 50%;
53    transform: translate(-50%, -50%);
54    z-index: 3;
55  }
56  .logo .segment:nth-child(1) {
57    transform: translate(-50%, -50%) rotate(0deg);
58  }
59  .logo .segment:nth-child(2) {
60    transform: translate(-50%, -50%) rotate(45deg);
61  }
62  .logo .segment:nth-child(3) {
63    transform: translate(-50%, -50%) rotate(90deg);
64  }
65  .logo .segment:nth-child(4) {
66    transform: translate(-50%, -50%) rotate(135deg);
67  }
68  .logo .segment:nth-child(5) {
69    transform: translate(-50%, -50%) rotate(180deg);
70  }
71  .logo .segment:nth-child(6) {
72    transform: translate(-50%, -50%) rotate(225deg);
73  }
74  .logo .segment:nth-child(7) {
75    transform: translate(-50%, -50%) rotate(270deg);
76  }
77  .logo .segment:nth-child(8) {
78    transform: translate(-50%, -50%) rotate(315deg);
79  }
80  @keyframes rotate {
81    0% {
82      transform: rotate(0deg);
83    }
84    100% {
85      transform: rotate(360deg);
86    }
87  }
88</style>
89</head>
90<body>
91  <div class="logo">
92    <div class="segment"></div>
93    <div class="segment"></div>
94    <div class="segment"></div>
95    <div class="segment"></div>
96    <div class="segment"></div>
97    <div class="segment"></div>
98    <div class="segment"></div>
99    <div class="segment"></div>
100  </div>
101</body>
102</html>