← back to Only CSS: Peacockcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Peacock
A 0.46T 0.16
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Animation</title>
6 <style>
7 body {
8 display: flex;
9 justify-content: center;
10 align-items: center;
11 height: 100vh;
12 background: black;
13 overflow: hidden;
14 }
15 .spinner {
16 width: 100px;
17 height: 100px;
18 position: relative;
19 animation: spin 3s ease-in-out infinite;
20 }
21 .segment {
22 position: absolute;
23 width: 10px;
24 height: 100px;
25 background: red;
26 transform-origin: 50px 50px;
27 border-radius: 5px;
28 }
29 .segment:nth-child(1) { transform: rotate(0deg); }
30 .segment:nth-child(2) { transform: rotate(45deg); }
31 .segment:nth-child(3) { transform: rotate(90deg); }
32 .segment:nth-child(4) { transform: rotate(135deg); }
33 .segment:nth-child(5) { transform: rotate(180deg); }
34 .segment:nth-child(6) { transform: rotate(225deg); }
35 .segment:nth-child(7) { transform: rotate(270deg); }
36 .segment:nth-child(8) { transform: rotate(315deg); }
37 @keyframes spin {
38 0% { transform: rotate(0deg); }
39 25% { transform: rotate(90deg); }
40 50% { transform: rotate(180deg); }
41 75% { transform: rotate(270deg); }
42 100% { transform: rotate(360deg); }
43 }
44 .segment:nth-child(1) { animation: colorChange 3s ease-in-out infinite; }
45 .segment:nth-child(2) { animation: colorChange 3s ease-in-out infinite 0.25s; }
46 .segment:nth-child(3) { animation: colorChange 3s ease-in-out infinite 0.5s; }
47 .segment:nth-child(4) { animation: colorChange 3s ease-in-out infinite 0.75s; }
48 .segment:nth-child(5) { animation: colorChange 3s ease-in-out infinite 1s; }
49 .segment:nth-child(6) { animation: colorChange 3s ease-in-out infinite 1.25s; }
50 .segment:nth-child(7) { animation: colorChange 3s ease-in-out infinite 1.5s; }
51 .segment:nth-child(8) { animation: colorChange 3s ease-in-out infinite 1.75s; }
52 @keyframes colorChange {
53 0% { background: red; }
54 25% { background: magenta; }
55 50% { background: blue; }
56 75% { background: cyan; }
57 100% { background: red; }
58 }
59 </style>
60</head>
61<body>
62 <div class="spinner">
63 <div class="segment"></div>
64 <div class="segment"></div>
65 <div class="segment"></div>
66 <div class="segment"></div>
67 <div class="segment"></div>
68 <div class="segment"></div>
69 <div class="segment"></div>
70 <div class="segment"></div>
71 </div>
72</body>
73</html>