← back to Only CSS: Colorful Jewelrycompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Colorful Jewelry
A 0.57T 0.27
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>Abstract Geometric Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 background-color: black;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 overflow: hidden;
17 }
18 .container {
19 width: 300px;
20 height: 600px;
21 position: relative;
22 overflow: hidden;
23 }
24 .shape {
25 position: absolute;
26 width: 100%;
27 height: 100%;
28 background: linear-gradient(45deg, #ff00ff, #ff6600, #00ff66, #0066ff, #ff00ff);
29 background-size: 400% 400%;
30 animation: gradientShift 8s ease-in-out infinite;
31 opacity: 0.7;
32 transform-origin: center;
33 }
34 .shape:nth-child(1) {
35 animation-delay: 0s;
36 transform: rotate(0deg) scale(1);
37 }
38 .shape:nth-child(2) {
39 animation-delay: 1s;
40 transform: rotate(45deg) scale(1.2);
41 }
42 .shape:nth-child(3) {
43 animation-delay: 2s;
44 transform: rotate(-45deg) scale(0.8);
45 }
46 .shape:nth-child(4) {
47 animation-delay: 3s;
48 transform: rotate(90deg) scale(1.1);
49 }
50 .shape:nth-child(5) {
51 animation-delay: 4s;
52 transform: rotate(-90deg) scale(0.9);
53 }
54 .shape:nth-child(6) {
55 animation-delay: 5s;
56 transform: rotate(180deg) scale(1.3);
57 }
58 .shape:nth-child(7) {
59 animation-delay: 6s;
60 transform: rotate(0deg) scale(0.7);
61 }
62 .shape:nth-child(8) {
63 animation-delay: 7s;
64 transform: rotate(30deg) scale(1.4);
65 }
66 .shape:nth-child(9) {
67 animation-delay: 8s;
68 transform: rotate(-30deg) scale(0.6);
69 }
70 @keyframes gradientShift {
71 0% { background-position: 0% 50%; }
72 50% { background-position: 100% 50%; }
73 100% { background-position: 0% 50%; }
74 }
75 </style>
76</head>
77<body>
78 <div class="container">
79 <div class="shape"></div>
80 <div class="shape"></div>
81 <div class="shape"></div>
82 <div class="shape"></div>
83 <div class="shape"></div>
84 <div class="shape"></div>
85 <div class="shape"></div>
86 <div class="shape"></div>
87 <div class="shape"></div>
88 </div>
89</body>
90</html>