← back to Only CSS: Codevember #5 Lightsabercompare with ground truth →
model output
GPT-5.4
Only CSS: Codevember #5 Lightsaber
A 0.83T 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" />
6<title>Glowing Saber Sweep</title>
7<style>
8 :root{
9 --bg:#000;
10 --hilt:#f2f2f2;
11 --hilt-edge:#bfc4c9;
12 --blade:#4aa3ff;
13 --glow-r:70;
14 --glow-g:163;
15 --glow-b:255;
16 --w:8px;
17 --len:165px;
18 --hilt-w:8px;
19 --hilt-h:32px;
20 --dur:8.8s;
21 }
22
23 html,body{
24 margin:0;
25 width:100%;
26 height:100%;
27 overflow:hidden;
28 background:var(--bg);
29 }
30
31 body{
32 display:grid;
33 place-items:center;
34 }
35
36 .stage{
37 position:relative;
38 width:min(100vw,100vh * 4 / 3);
39 aspect-ratio:4/3;
40 background:#000;
41 overflow:hidden;
42 }
43
44 .saber{
45 position:absolute;
46 left:50%;
47 top:50%;
48 width:var(--hilt-w);
49 height:calc(var(--len) + var(--hilt-h));
50 transform-origin:50% calc(100% - var(--hilt-h) / 2);
51 animation: move var(--dur) linear infinite;
52 filter: saturate(1.1);
53 }
54
55 .blade{
56 position:absolute;
57 left:50%;
58 bottom:var(--hilt-h);
59 width:var(--w);
60 height:var(--len);
61 transform:translateX(-50%);
62 border-radius:999px;
63 background:
64 linear-gradient(to right,
65 rgba(255,255,255,.18) 0%,
66 rgba(255,255,255,.72) 18%,
67 rgba(255,255,255,.95) 50%,
68 rgba(255,255,255,.72) 82%,
69 rgba(255,255,255,.18) 100%),
70 linear-gradient(to top,
71 color-mix(in srgb, var(--blade) 88%, white 12%),
72 var(--blade));
73 box-shadow:
74 0 0 6px rgba(var(--glow-r),var(--glow-g),var(--glow-b),.95),
75 0 0 14px rgba(var(--glow-r),var(--glow-g),var(--glow-b),.85),
76 0 0 28px rgba(var(--glow-r),var(--glow-g),var(--glow-b),.65),
77 0 0 52px rgba(var(--glow-r),var(--glow-g),var(--glow-b),.42),
78 0 0 92px rgba(var(--glow-r),var(--glow-g),var(--glow-b),.22);
79 animation: colorShift var(--dur) linear infinite;
80 }
81
82 .blade::before{
83 content:"";
84 position:absolute;
85 inset:-2px -2px -2px -2px;
86 border-radius:999px;
87 background:linear-gradient(to top, rgba(255,255,255,.18), rgba(255,255,255,.05));
88 filter:blur(2px);
89 opacity:.9;
90 mix-blend-mode:screen;
91 }
92
93 .aura{
94 position:absolute;
95 left:50%;
96 bottom:var(--hilt-h);
97 width:90px;
98 height:220px;
99 transform:translateX(-50%);
100 border-radius:50%;
101 background:
102 radial-gradient(ellipse at 50% 55%,
103 rgba(var(--glow-r),var(--glow-g),var(--glow-b),.28) 0%,
104 rgba(var(--glow-r),var(--glow-g),var(--glow-b),.16) 28%,
105 rgba(var(--glow-r),var(--glow-g),var(--glow-b),.08) 48%,
106 rgba(var(--glow-r),var(--glow-g),var(--glow-b),0) 74%);
107 filter:blur(12px);
108 transform-origin:50% 100%;
109 animation: colorShift var(--dur) linear infinite;
110 pointer-events:none;
111 }
112
113 .hilt{
114 position:absolute;
115 left:50%;
116 bottom:0;
117 width:var(--hilt-w);
118 height:var(--hilt-h);
119 transform:translateX(-50%);
120 border-radius:999px;
121 background:
122 linear-gradient(to right,
123 #cfd4d8 0%,
124 #ffffff 22%,
125 #f7f7f7 50%,
126 #d7dce0 78%,
127 #aeb5bb 100%);
128 box-shadow:
129 inset 1px 0 0 rgba(255,255,255,.8),
130 inset -1px 0 0 rgba(0,0,0,.18),
131 0 0 2px rgba(255,255,255,.35);
132 }
133
134 .hilt::before{
135 content:"";
136 position:absolute;
137 top:-3px;
138 left:0;
139 right:0;
140 height:6px;
141 border-radius:999px;
142 background:linear-gradient(to bottom,#8f959b,#dfe3e6);
143 opacity:.9;
144 }
145
146 @keyframes colorShift{
147 0%,22%{
148 --blade:#4a7dff;
149 --glow-r:74; --glow-g:125; --glow-b:255;
150 }
151 28%{
152 --blade:#3fdcff;
153 --glow-r:63; --glow-g:220; --glow-b:255;
154 }
155 34%,78%{
156 --blade:#35ff6a;
157 --glow-r:53; --glow-g:255; --glow-b:106;
158 }
159 84%{
160 --blade:#b8ff5a;
161 --glow-r:184; --glow-g:255; --glow-b:90;
162 }
163 100%{
164 --blade:#ff4a4a;
165 --glow-r:255; --glow-g:74; --glow-b:74;
166 }
167 }
168
169 @keyframes move{
170 0% { transform:translate(-50%,-50%) translate(12px,-120px) rotate(0deg) scale(.98); }
171 8% { transform:translate(-50%,-50%) translate(42px,18px) rotate(26deg) scale(.92); }
172 14% { transform:translate(-50%,-50%) translate(58px,8px) rotate(58deg) scale(.90); }
173 20% { transform:translate(-50%,-50%) translate(-38px,6px) rotate(-47deg) scale(.92); }
174 26% { transform:translate(-50%,-50%) translate(12px,210px) rotate(0deg) scale(.18); }
175
176 32% { transform:translate(-50%,-50%) translate(-62px,92px) rotate(48deg) scale(.86); }
177 38% { transform:translate(-50%,-50%) translate(58px,72px) rotate(132deg) scale(.92); }
178 44% { transform:translate(-50%,-50%) translate(18px,18px) rotate(170deg) scale(.90); }
179 50% { transform:translate(-50%,-50%) translate(-22px,42px) rotate(228deg) scale(.62); }
180 56% { transform:translate(-50%,-50%) translate(-48px,18px) rotate(314deg) scale(.92); }
181 62% { transform:translate(-50%,-50%) translate(18px,210px) rotate(360deg) scale(.18); }
182
183 68% { transform:translate(-50%,-50%) translate(8px,92px) rotate(66deg) scale(.88); }
184 74% { transform:translate(-50%,-50%) translate(-54px,18px) rotate(-42deg) scale(.92); }
185 80% { transform:translate(-50%,-50%) translate(42px,42px) rotate(-84deg) scale(.84); }
186 86% { transform:translate(-50%,-50%) translate(-18px,112px) rotate(24deg) scale(.72); }
187 92% { transform:translate(-50%,-50%) translate(8px,210px) rotate(0deg) scale(.18); }
188 100% { transform:translate(-50%,-50%) translate(-18px,-8px) rotate(-8deg) scale(.96); }
189 }
190</style>
191</head>
192<body>
193 <div class="stage">
194 <div class="saber">
195 <div class="aura"></div>
196 <div class="blade"></div>
197 <div class="hilt"></div>
198 </div>
199 </div>
200</body>
201</html>