← back to #CodeVember #12 - shrinking hexagoncompare with ground truth →
model output
GPT-5.4
#CodeVember #12 - shrinking hexagon
A 0.82T 0.25
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>Hex Burst Loop</title>
7<style>
8 :root{
9 --bg:#242424;
10 --fg:#d9d9d9;
11 --size:132px;
12 --dur:1.8s;
13 }
14
15 html,body{
16 margin:0;
17 width:100%;
18 height:100%;
19 background:var(--bg);
20 overflow:hidden;
21 }
22
23 body{
24 display:grid;
25 place-items:center;
26 }
27
28 .scene{
29 position:relative;
30 width:var(--size);
31 aspect-ratio:1;
32 }
33
34 .core,
35 .ring{
36 position:absolute;
37 inset:0;
38 display:grid;
39 place-items:center;
40 }
41
42 .core{
43 animation: corePulse var(--dur) linear infinite;
44 }
45
46 .hex{
47 width:58%;
48 height:66%;
49 background:var(--fg);
50 clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
51 }
52
53 .ring{
54 animation: ringSpin var(--dur) linear infinite;
55 }
56
57 .tri{
58 position:absolute;
59 left:50%;
60 top:50%;
61 width:18px;
62 height:22px;
63 margin:-11px 0 0 -9px;
64 background:var(--fg);
65 clip-path:polygon(0 50%, 100% 0, 100% 100%);
66 transform-origin:0 50%;
67 opacity:0;
68 }
69
70 /* 6 primary triangles */
71 .p1{ --a:0deg; animation: tri1 var(--dur) linear infinite; }
72 .p2{ --a:60deg; animation: tri1 var(--dur) linear infinite; }
73 .p3{ --a:120deg; animation: tri1 var(--dur) linear infinite; }
74 .p4{ --a:180deg; animation: tri1 var(--dur) linear infinite; }
75 .p5{ --a:240deg; animation: tri1 var(--dur) linear infinite; }
76 .p6{ --a:300deg; animation: tri1 var(--dur) linear infinite; }
77
78 /* 6 secondary smaller triangles, phase-delayed */
79 .s1{ --a:30deg; width:11px; height:14px; margin:-7px 0 0 -5.5px; animation: tri2 var(--dur) linear infinite; }
80 .s2{ --a:90deg; width:11px; height:14px; margin:-7px 0 0 -5.5px; animation: tri2 var(--dur) linear infinite; }
81 .s3{ --a:150deg; width:11px; height:14px; margin:-7px 0 0 -5.5px; animation: tri2 var(--dur) linear infinite; }
82 .s4{ --a:210deg; width:11px; height:14px; margin:-7px 0 0 -5.5px; animation: tri2 var(--dur) linear infinite; }
83 .s5{ --a:270deg; width:11px; height:14px; margin:-7px 0 0 -5.5px; animation: tri2 var(--dur) linear infinite; }
84 .s6{ --a:330deg; width:11px; height:14px; margin:-7px 0 0 -5.5px; animation: tri2 var(--dur) linear infinite; }
85
86 @keyframes corePulse{
87 0%,12%{
88 transform:scale(1);
89 opacity:1;
90 }
91 28%{
92 transform:scale(1);
93 opacity:1;
94 }
95 52%{
96 transform:scale(0.92);
97 opacity:0.98;
98 }
99 66%{
100 transform:scale(0.88);
101 opacity:0.96;
102 }
103 82%{
104 transform:scale(0.96);
105 opacity:1;
106 }
107 100%{
108 transform:scale(1);
109 opacity:1;
110 }
111 }
112
113 @keyframes ringSpin{
114 0%,12%{
115 transform:rotate(0deg) scale(0.7);
116 opacity:0;
117 }
118 28%{
119 transform:rotate(0deg) scale(1);
120 opacity:1;
121 }
122 52%{
123 transform:rotate(30deg) scale(1.08);
124 opacity:1;
125 }
126 66%{
127 transform:rotate(60deg) scale(1.12);
128 opacity:1;
129 }
130 82%{
131 transform:rotate(18deg) scale(0.98);
132 opacity:1;
133 }
134 100%{
135 transform:rotate(0deg) scale(1);
136 opacity:1;
137 }
138 }
139
140 @keyframes tri1{
141 0%,10%{
142 opacity:0;
143 transform:rotate(var(--a)) translateX(28px) scale(0.35);
144 }
145 24%{
146 opacity:1;
147 transform:rotate(var(--a)) translateX(38px) scale(0.9);
148 }
149 40%{
150 opacity:1;
151 transform:rotate(calc(var(--a) + 8deg)) translateX(43px) scale(1);
152 }
153 58%{
154 opacity:1;
155 transform:rotate(calc(var(--a) + 18deg)) translateX(34px) scale(1.45);
156 }
157 70%{
158 opacity:1;
159 transform:rotate(calc(var(--a) + 28deg)) translateX(26px) scale(1.55);
160 }
161 84%{
162 opacity:0.95;
163 transform:rotate(calc(var(--a) + 10deg)) translateX(34px) scale(1.05);
164 }
165 100%{
166 opacity:1;
167 transform:rotate(var(--a)) translateX(38px) scale(0.9);
168 }
169 }
170
171 @keyframes tri2{
172 0%,18%{
173 opacity:0;
174 transform:rotate(var(--a)) translateX(30px) scale(0.2);
175 }
176 30%{
177 opacity:0.95;
178 transform:rotate(var(--a)) translateX(42px) scale(0.8);
179 }
180 46%{
181 opacity:1;
182 transform:rotate(calc(var(--a) - 10deg)) translateX(48px) scale(1);
183 }
184 62%{
185 opacity:1;
186 transform:rotate(calc(var(--a) - 22deg)) translateX(36px) scale(1.25);
187 }
188 74%{
189 opacity:0.9;
190 transform:rotate(calc(var(--a) - 30deg)) translateX(24px) scale(1.15);
191 }
192 88%{
193 opacity:0;
194 transform:rotate(calc(var(--a) - 8deg)) translateX(30px) scale(0.35);
195 }
196 100%{
197 opacity:0;
198 transform:rotate(var(--a)) translateX(30px) scale(0.2);
199 }
200 }
201</style>
202</head>
203<body>
204 <div class="scene" aria-hidden="true">
205 <div class="core">
206 <div class="hex"></div>
207 </div>
208 <div class="ring">
209 <div class="tri p1"></div>
210 <div class="tri p2"></div>
211 <div class="tri p3"></div>
212 <div class="tri p4"></div>
213 <div class="tri p5"></div>
214 <div class="tri p6"></div>
215
216 <div class="tri s1"></div>
217 <div class="tri s2"></div>
218 <div class="tri s3"></div>
219 <div class="tri s4"></div>
220 <div class="tri s5"></div>
221 <div class="tri s6"></div>
222 </div>
223 </div>
224
225<script>
226 // Keep the motif proportionally similar to the reference across screen sizes.
227 const scene = document.querySelector('.scene');
228 function resize(){
229 const s = Math.min(innerWidth, innerHeight) * 0.13;
230 scene.style.setProperty('--size', `${Math.max(90, Math.min(150, s))}px`);
231 }
232 addEventListener('resize', resize, {passive:true});
233 resize();
234</script>
235</body>
236</html>