← back to Such Spinners, Much Loadingcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Such Spinners, Much Loading
A 0.84T 0.26
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>