← back to Only CSS: Colorful Jewelrycompare with ground truth →
model output
Claude Sonnet 4.6
Only CSS: Colorful Jewelry
A 0.87T 0.28
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 Color Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9 body {
10 background: #000;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 width: 100vw;
15 height: 100vh;
16 overflow: hidden;
17 }
18 .container {
19 position: relative;
20 width: 250px;
21 height: 500px;
22 overflow: hidden;
23 background: #111;
24 }
25 canvas {
26 position: absolute;
27 top: 0; left: 0;
28 width: 100%;
29 height: 100%;
30 }
31</style>
32</head>
33<body>
34<div class="container">
35 <canvas id="c"></canvas>
36</div>
37<script>
38const canvas = document.getElementById('c');
39const ctx = canvas.getContext('2d');
40canvas.width = 250;
41canvas.height = 500;
42
43const W = canvas.width;
44const H = canvas.height;
45
46// Polygon shapes with colors that animate
47const shapes = [];
48
49function rand(min, max) { return Math.random() * (max - min) + min; }
50
51const colors = [
52 'rgba(255,0,100,',
53 'rgba(255,0,180,',
54 'rgba(200,0,255,',
55 'rgba(100,0,255,',
56 'rgba(0,100,255,',
57 'rgba(0,200,100,',
58 'rgba(100,200,0,',
59 'rgba(255,200,0,',
60 'rgba(255,100,0,',
61 'rgba(255,50,150,',
62 'rgba(150,0,200,',
63 'rgba(0,150,200,',
64 'rgba(200,255,0,',
65 'rgba(255,150,50,',
66 'rgba(255,255,255,',
67];
68
69class Shape {
70 constructor() {
71 this.reset();
72 }
73 reset() {
74 this.cx = rand(0, W);
75 this.cy = rand(0, H);
76 this.size = rand(80, 220);
77 this.angle = rand(0, Math.PI * 2);
78 this.angleSpeed = rand(-0.008, 0.008);
79 this.vx = rand(-0.3, 0.3);
80 this.vy = rand(-0.3, 0.3);
81 this.color = colors[Math.floor(rand(0, colors.length))];
82 this.alpha = rand(0.3, 0.7);
83 this.sides = Math.floor(rand(3, 5));
84 this.points = this.generatePoints();
85 }
86 generatePoints() {
87 const pts = [];
88 for (let i = 0; i < this.sides; i++) {
89 const a = (i / this.sides) * Math.PI * 2;
90 const r = this.size * rand(0.5, 1.0);
91 pts.push({ r, a });
92 }
93 return pts;
94 }
95 update() {
96 this.angle += this.angleSpeed;
97 this.cx += this.vx;
98 this.cy += this.vy;
99 if (this.cx < -this.size) this.cx = W + this.size;
100 if (this.cx > W + this.size) this.cx = -this.size;
101 if (this.cy < -this.size) this.cy = H + this.size;
102 if (this.cy > H + this.size) this.cy = -this.size;
103 }
104 draw() {
105 ctx.save();
106 ctx.translate(this.cx, this.cy);
107 ctx.rotate(this.angle);
108 ctx.beginPath();
109 for (let i = 0; i < this.points.length; i++) {
110 const p = this.points[i];
111 const x = Math.cos(p.a) * p.r;
112 const y = Math.sin(p.a) * p.r;
113 if (i === 0) ctx.moveTo(x, y);
114 else ctx.lineTo(x, y);
115 }
116 ctx.closePath();
117 ctx.fillStyle = this.color + this.alpha + ')';
118 ctx.fill();
119 ctx.restore();
120 }
121}
122
123// Create shapes
124for (let i = 0; i < 30; i++) {
125 shapes.push(new Shape());
126}
127
128// Bright center glow that moves
129let glowX = W * 0.4;
130let glowY = H * 0.4;
131let glowT = 0;
132
133function drawGlow() {
134 glowT += 0.02;
135 glowX = W * 0.3 + Math.sin(glowT * 0.7) * W * 0.25;
136 glowY = H * 0.35 + Math.cos(glowT * 0.5) * H * 0.15;
137
138 const grad = ctx.createRadialGradient(glowX, glowY, 0, glowX, glowY, 120);
139 grad.addColorStop(0, 'rgba(255,255,255,0.95)');
140 grad.addColorStop(0.2, 'rgba(255,255,255,0.6)');
141 grad.addColorStop(0.5, 'rgba(255,200,255,0.2)');
142 grad.addColorStop(1, 'rgba(255,255,255,0)');
143 ctx.fillStyle = grad;
144 ctx.fillRect(0, 0, W, H);
145}
146
147// Light rays from glow center
148function drawRays() {
149 const numRays = 8;
150 for (let i = 0; i < numRays; i++) {
151 const angle = (i / numRays) * Math.PI * 2 + glowT * 0.3;
152 const len = rand(100, 300);
153 const grad = ctx.createLinearGradient(
154 glowX, glowY,
155 glowX + Math.cos(angle) * len,
156 glowY + Math.sin(angle) * len
157 );
158 grad.addColorStop(0, 'rgba(255,255,255,0.5)');
159 grad.addColorStop(1, 'rgba(255,255,255,0)');
160 ctx.save();
161 ctx.translate(glowX, glowY);
162 ctx.rotate(angle);
163 ctx.beginPath();
164 ctx.moveTo(0, 0);
165 ctx.lineTo(len, -5);
166 ctx.lineTo(len, 5);
167 ctx.closePath();
168 ctx.fillStyle = grad;
169 ctx.fill();
170 ctx.restore();
171 }
172}
173
174function animate() {
175 ctx.clearRect(0, 0, W, H);
176 ctx.fillStyle = '#000';
177 ctx.fillRect(0, 0, W, H);
178
179 // Draw shapes with screen blend
180 ctx.globalCompositeOperation = 'screen';
181 shapes.forEach(s => {
182 s.update();
183 s.draw();
184 });
185
186 ctx.globalCompositeOperation = 'screen';
187 drawRays();
188 drawGlow();
189
190 ctx.globalCompositeOperation = 'source-over';
191 requestAnimationFrame(animate);
192}
193
194animate();
195</script>
196</body>
197</html>