← back to Only CSS: Colorful Jewelrycompare with ground truth →
model output
GPT-5.4
Only CSS: Colorful Jewelry
A 0.76T 0.31
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" />
6<title>Abstract Prism Animation</title>
7<style>
8 :root{
9 --bg:#000;
10 --w:250px;
11 --h:500px;
12 --dur:8s;
13 }
14
15 html,body{
16 margin:0;
17 height:100%;
18 background:var(--bg);
19 overflow:hidden;
20 }
21
22 body{
23 display:grid;
24 place-items:center;
25 font-family:sans-serif;
26 }
27
28 .stage{
29 width:var(--w);
30 height:var(--h);
31 position:relative;
32 overflow:hidden;
33 background:
34 radial-gradient(circle at 45% 45%, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),
35 linear-gradient(180deg, rgba(40,20,70,.9), rgba(20,10,40,.95));
36 isolation:isolate;
37 }
38
39 .poly{
40 position:absolute;
41 inset:auto;
42 opacity:.34;
43 mix-blend-mode:screen;
44 filter:blur(.2px);
45 will-change:transform, opacity;
46 animation: drift var(--dur) linear infinite alternate;
47 }
48
49 .poly::before{
50 content:"";
51 position:absolute;
52 inset:0;
53 background:var(--fill);
54 clip-path:polygon(var(--clip));
55 }
56
57 .glow{
58 position:absolute;
59 inset:0;
60 mix-blend-mode:screen;
61 pointer-events:none;
62 background:
63 radial-gradient(circle at 34% 46%, rgba(255,255,255,.95) 0 10%, rgba(255,245,255,.55) 18%, rgba(255,255,255,0) 42%),
64 radial-gradient(circle at 62% 28%, rgba(255,235,90,.55), rgba(255,235,90,0) 28%),
65 radial-gradient(circle at 78% 82%, rgba(120,255,220,.35), rgba(120,255,220,0) 22%);
66 animation: pulse var(--dur) ease-in-out infinite;
67 }
68
69 .band{
70 position:absolute;
71 left:-10%;
72 width:120%;
73 height:9%;
74 top:39%;
75 background:rgba(255,255,255,.55);
76 mix-blend-mode:screen;
77 filter:blur(.5px);
78 animation: bandMove var(--dur) ease-in-out infinite;
79 }
80
81 .grain{
82 position:absolute;
83 inset:0;
84 opacity:.08;
85 background-image:
86 repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px),
87 repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px);
88 mix-blend-mode:overlay;
89 pointer-events:none;
90 }
91
92 @keyframes drift{
93 0%{
94 transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) scale(var(--s1));
95 opacity:var(--o1);
96 }
97 50%{
98 transform:translate(calc((var(--x1) + var(--x2))/2),calc((var(--y1) + var(--y2))/2)) rotate(calc((var(--r1) + var(--r2))/2)) scale(calc((var(--s1) + var(--s2))/2));
99 opacity:calc((var(--o1) + var(--o2))/2);
100 }
101 100%{
102 transform:translate(var(--x2),var(--y2)) rotate(var(--r2)) scale(var(--s2));
103 opacity:var(--o2);
104 }
105 }
106
107 @keyframes pulse{
108 0%,100%{ transform:scale(1) translate(0,0); opacity:.9; }
109 25%{ transform:scale(1.06) translate(6px,-8px); opacity:1; }
110 50%{ transform:scale(.96) translate(-8px,10px); opacity:.82; }
111 75%{ transform:scale(1.03) translate(10px,2px); opacity:.95; }
112 }
113
114 @keyframes bandMove{
115 0%,100%{ transform:translateY(0) scaleX(1); opacity:.45; }
116 30%{ transform:translateY(-18px) scaleX(1.04); opacity:.62; }
117 60%{ transform:translateY(10px) scaleX(.98); opacity:.38; }
118 }
119</style>
120</head>
121<body>
122 <div class="stage" id="stage">
123 <div class="glow"></div>
124 <div class="band"></div>
125 <div class="grain"></div>
126 </div>
127
128<script>
129 const stage = document.getElementById('stage');
130
131 const polys = [
132 {w:220,h:260,x1:-20,y1:-40,x2:40,y2:-10,r1:-18,r2:12,s1:1.0,s2:1.08,o1:.28,o2:.42,fill:'rgba(255,0,180,.55)',clip:'0 0, 100% 12%, 42% 100%'},
133 {w:210,h:250,x1:70,y1:-30,x2:20,y2:10,r1:22,r2:-8,s1:1.05,s2:.95,o1:.26,o2:.38,fill:'rgba(255,220,0,.55)',clip:'18% 0, 100% 0, 72% 100%, 0 58%'},
134 {w:180,h:300,x1:10,y1:120,x2:-30,y2:70,r1:-35,r2:-12,s1:1,s2:1.1,o1:.22,o2:.34,fill:'rgba(120,40,255,.45)',clip:'0 18%, 58% 0, 100% 100%, 18% 82%'},
135 {w:240,h:180,x1:-40,y1:180,x2:10,y2:130,r1:8,r2:-18,s1:1,s2:1.06,o1:.24,o2:.36,fill:'rgba(255,70,170,.5)',clip:'0 30%, 100% 0, 82% 100%'},
136 {w:120,h:360,x1:120,y1:40,x2:90,y2:-20,r1:18,r2:34,s1:1,s2:.92,o1:.18,o2:.3,fill:'rgba(255,255,255,.45)',clip:'40% 0, 100% 0, 62% 100%, 0 100%'},
137 {w:260,h:220,x1:-60,y1:40,x2:-10,y2:0,r1:-8,r2:16,s1:1.02,s2:.96,o1:.2,o2:.34,fill:'rgba(255,255,255,.42)',clip:'0 62%, 28% 18%, 100% 42%, 18% 100%'},
138 {w:170,h:260,x1:130,y1:180,x2:80,y2:120,r1:42,r2:18,s1:.95,s2:1.05,o1:.18,o2:.28,fill:'rgba(120,255,220,.42)',clip:'0 0, 100% 28%, 52% 100%'},
139 {w:220,h:220,x1:40,y1:220,x2:10,y2:170,r1:0,r2:-24,s1:1,s2:1.08,o1:.2,o2:.32,fill:'rgba(255,255,255,.35)',clip:'0 100%, 52% 0, 100% 72%'},
140 {w:180,h:180,x1:-30,y1:0,x2:20,y2:-30,r1:30,r2:8,s1:1,s2:1.12,o1:.18,o2:.28,fill:'rgba(255,40,40,.38)',clip:'0 0, 100% 0, 100% 100%'},
141 {w:260,h:140,x1:-20,y1:260,x2:-10,y2:220,r1:-12,r2:10,s1:1,s2:1.04,o1:.16,o2:.26,fill:'rgba(80,120,255,.35)',clip:'0 0, 100% 40%, 40% 100%'},
142 {w:140,h:320,x1:20,y1:-20,x2:60,y2:20,r1:-10,r2:14,s1:1,s2:.94,o1:.18,o2:.3,fill:'rgba(255,255,255,.4)',clip:'0 0, 100% 18%, 38% 100%'},
143 {w:220,h:260,x1:-70,y1:90,x2:-20,y2:40,r1:14,r2:-10,s1:1.08,s2:.98,o1:.18,o2:.3,fill:'rgba(255,0,255,.42)',clip:'0 20%, 100% 0, 70% 100%, 0 72%'},
144 {w:180,h:260,x1:90,y1:90,x2:60,y2:40,r1:-28,r2:-6,s1:1,s2:1.06,o1:.16,o2:.28,fill:'rgba(255,140,0,.42)',clip:'0 0, 100% 0, 42% 100%'},
145 {w:260,h:260,x1:-30,y1:-80,x2:10,y2:-40,r1:8,r2:24,s1:1,s2:1.02,o1:.14,o2:.24,fill:'rgba(0,255,120,.28)',clip:'0 0, 100% 0, 100% 40%, 20% 100%'},
146 {w:120,h:420,x1:-10,y1:20,x2:30,y2:-10,r1:6,r2:-8,s1:1,s2:1,o1:.16,o2:.28,fill:'rgba(255,255,255,.38)',clip:'0 0, 36% 0, 100% 100%, 0 100%'},
147 {w:240,h:200,x1:20,y1:20,x2:50,y2:60,r1:18,r2:-12,s1:1,s2:1.08,o1:.16,o2:.26,fill:'rgba(255,255,255,.3)',clip:'0 40%, 60% 0, 100% 100%'},
148 {w:200,h:300,x1:-80,y1:-10,x2:-30,y2:30,r1:-22,r2:6,s1:.96,s2:1.06,o1:.16,o2:.28,fill:'rgba(255,255,255,.28)',clip:'0 0, 100% 30%, 20% 100%'},
149 {w:220,h:220,x1:70,y1:250,x2:30,y2:210,r1:26,r2:0,s1:1,s2:1.04,o1:.14,o2:.24,fill:'rgba(255,255,0,.34)',clip:'0 0, 100% 60%, 0 100%'}
150 ];
151
152 polys.forEach((p,i)=>{
153 const el = document.createElement('div');
154 el.className = 'poly';
155 el.style.width = p.w + 'px';
156 el.style.height = p.h + 'px';
157 el.style.setProperty('--fill', p.fill);
158 el.style.setProperty('--clip', p.clip);
159 el.style.setProperty('--x1', p.x1 + 'px');
160 el.style.setProperty('--y1', p.y1 + 'px');
161 el.style.setProperty('--x2', p.x2 + 'px');
162 el.style.setProperty('--y2', p.y2 + 'px');
163 el.style.setProperty('--r1', p.r1 + 'deg');
164 el.style.setProperty('--r2', p.r2 + 'deg');
165 el.style.setProperty('--s1', p.s1);
166 el.style.setProperty('--s2', p.s2);
167 el.style.setProperty('--o1', p.o1);
168 el.style.setProperty('--o2', p.o2);
169 el.style.left = '0px';
170 el.style.top = '0px';
171 el.style.animationDelay = (-i * 0.35) + 's';
172 stage.appendChild(el);
173 });
174
175 // Keep overlay layers on top
176 stage.appendChild(document.querySelector('.glow'));
177 stage.appendChild(document.querySelector('.band'));
178 stage.appendChild(document.querySelector('.grain'));
179</script>
180</body>
181</html>