animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Such Spinners, Much Loading

model output

Qwen3-VL-8B-Instruct

Such Spinners, Much Loading

A 0.84T 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>Yin Yang Animation</title>
7<style>
8  body {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    background: white;
14    margin: 0;
15  }
16  .yin-yang {
17    width: 80px;
18    height: 80px;
19    position: relative;
20    animation: rotate 4s linear infinite;
21  }
22  .yin-yang::before {
23    content: '';
24    position: absolute;
25    top: 0;
26    left: 0;
27    width: 100%;
28    height: 100%;
29    border-radius: 50%;
30    background: #333;
31  }
32  .yin {
33    position: absolute;
34    top: 0;
35    left: 0;
36    width: 50%;
37    height: 50%;
38    border-radius: 50%;
39    background: #fff;
40    transform: translate(50%, 50%);
41    animation: yin 4s linear infinite;
42  }
43  .yang {
44    position: absolute;
45    top: 0;
46    left: 0;
47    width: 50%;
48    height: 50%;
49    border-radius: 50%;
50    background: #fff;
51    transform: translate(50%, 50%);
52    animation: yang 4s linear infinite;
53  }
54  @keyframes rotate {
55    0% { transform: rotate(0deg); }
56    100% { transform: rotate(360deg); }
57  }
58  @keyframes yin {
59    0% { transform: translate(50%, 50%) scale(0.9); }
60    50% { transform: translate(50%, 50%) scale(1.1); }
61    100% { transform: translate(50%, 50%) scale(0.9); }
62  }
63  @keyframes yang {
64    0% { transform: translate(50%, 50%) scale(0.9); }
65    50% { transform: translate(50%, 50%) scale(1.1); }
66    100% { transform: translate(50%, 50%) scale(0.9); }
67  }
68</style>
69</head>
70<body>
71  <div class="yin-yang">
72    <div class="yin"></div>
73    <div class="yang"></div>
74  </div>
75</body>
76</html>