← back to Only CSS: Porco Rosso "SAVOIA" (紅の豚)compare with ground truth →
model output
GPT-5.4
Only CSS: Porco Rosso "SAVOIA" (紅の豚)
A 0.72T 0.57
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>Low Poly Red Seaplane Animation</title>
7<style>
8 :root{
9 --bg1:#0a0b14;
10 --bg2:#132231;
11 --red:#f10d0d;
12 --brown:#6b2d12;
13 --wood:#b67a3a;
14 --yellow:#ffef1f;
15 --green:#6ad66f;
16 --glass:#5f5aa8;
17 --metal:#d9d9d9;
18 --strut:#6f6f8f;
19 }
20 html,body{
21 margin:0;
22 height:100%;
23 overflow:hidden;
24 background:radial-gradient(circle at 50% 55%, #162838 0%, #0d1521 45%, #070912 100%);
25 font-family:system-ui,sans-serif;
26 }
27 .scene{
28 position:relative;
29 width:100vw;
30 height:100vh;
31 perspective:1100px;
32 perspective-origin:50% 50%;
33 overflow:hidden;
34 }
35 .plane-wrap{
36 position:absolute;
37 left:50%;
38 top:50%;
39 width:0;
40 height:0;
41 transform-style:preserve-3d;
42 animation: flight 8s linear infinite;
43 }
44 .plane{
45 position:absolute;
46 transform-style:preserve-3d;
47 width:0;height:0;
48 }
49 .part{
50 position:absolute;
51 transform-style:preserve-3d;
52 }
53 .poly{
54 position:absolute;
55 clip-path:polygon(var(--pts));
56 background:var(--c, var(--red));
57 width:var(--w);
58 height:var(--h);
59 transform:translate3d(var(--x,0),var(--y,0),var(--z,0)) rotateX(var(--rx,0)) rotateY(var(--ry,0)) rotateZ(var(--rz,0));
60 transform-style:preserve-3d;
61 }
62 .ellipse{
63 position:absolute;
64 width:var(--w);
65 height:var(--h);
66 border-radius:50%;
67 background:var(--c);
68 transform:translate3d(var(--x,0),var(--y,0),var(--z,0)) rotateX(var(--rx,0)) rotateY(var(--ry,0)) rotateZ(var(--rz,0));
69 }
70 .prop{
71 position:absolute;
72 width:0;height:0;
73 transform-style:preserve-3d;
74 transform:translate3d(-10px,-10px,120px);
75 animation: propSpin .12s linear infinite;
76 }
77 .blade{
78 position:absolute;
79 width:18px;
80 height:120px;
81 left:-9px;
82 top:-60px;
83 background:linear-gradient(to bottom, #4f1f0d 0%, #7a3417 50%, #4f1f0d 100%);
84 border-radius:50% 50% 45% 45% / 12% 12% 88% 88%;
85 transform-origin:50% 50%;
86 opacity:.95;
87 }
88 .blade.b2{ transform:rotate(90deg); }
89 .hub{
90 position:absolute;
91 width:42px;height:42px;
92 left:-21px;top:-21px;
93 border-radius:50%;
94 background:radial-gradient(circle at 35% 35%, #fff86a 0%, var(--yellow) 45%, #e0c700 100%);
95 box-shadow:0 0 10px rgba(255,235,0,.15);
96 }
97
98 @keyframes propSpin{
99 from{ transform:translate3d(-10px,-10px,120px) rotateZ(0deg); }
100 to{ transform:translate3d(-10px,-10px,120px) rotateZ(360deg); }
101 }
102
103 @keyframes flight{
104 0%{
105 transform:
106 translate3d(220px,-40px,0)
107 rotateX(68deg) rotateY(-18deg) rotateZ(-18deg)
108 scale(1.18);
109 }
110 12%{
111 transform:
112 translate3d(150px,-10px,0)
113 rotateX(72deg) rotateY(-10deg) rotateZ(-8deg)
114 scale(1.16);
115 }
116 24%{
117 transform:
118 translate3d(70px,20px,0)
119 rotateX(78deg) rotateY(0deg) rotateZ(4deg)
120 scale(1.12);
121 }
122 36%{
123 transform:
124 translate3d(10px,45px,0)
125 rotateX(86deg) rotateY(8deg) rotateZ(14deg)
126 scale(1.08);
127 }
128 48%{
129 transform:
130 translate3d(-40px,70px,0)
131 rotateX(96deg) rotateY(14deg) rotateZ(24deg)
132 scale(1.03);
133 }
134 60%{
135 transform:
136 translate3d(-70px,95px,0)
137 rotateX(108deg) rotateY(18deg) rotateZ(34deg)
138 scale(.98);
139 }
140 72%{
141 transform:
142 translate3d(-95px,120px,0)
143 rotateX(118deg) rotateY(20deg) rotateZ(46deg)
144 scale(.93);
145 }
146 84%{
147 transform:
148 translate3d(-120px,145px,0)
149 rotateX(128deg) rotateY(18deg) rotateZ(58deg)
150 scale(.88);
151 }
152 100%{
153 transform:
154 translate3d(-145px,170px,0)
155 rotateX(138deg) rotateY(14deg) rotateZ(70deg)
156 scale(.84);
157 }
158 }
159
160 .shadow{
161 position:absolute;
162 inset:0;
163 background:
164 radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.02), transparent 45%),
165 radial-gradient(ellipse at 50% 55%, rgba(0,0,0,.18), transparent 70%);
166 pointer-events:none;
167 }
168</style>
169</head>
170<body>
171<div class="scene">
172 <div class="plane-wrap">
173 <div class="plane" id="plane">
174 <!-- main float / hull -->
175 <div class="poly" style="--w:360px;--h:170px;--pts:8% 70%,18% 48%,58% 28%,92% 38%,98% 58%,78% 78%,28% 92%,12% 88%;--c:var(--red);--x:-180px;--y:40px;--z:-10px;--rx:88deg;--ry:0deg;--rz:-8deg;"></div>
176 <div class="poly" style="--w:300px;--h:120px;--pts:0 55%,18% 20%,88% 8%,100% 42%,82% 78%,18% 92%;--c:var(--red);--x:-150px;--y:58px;--z:-18px;--rx:88deg;--ry:0deg;--rz:-8deg;"></div>
177
178 <!-- nose vents -->
179 <div class="ellipse" style="--w:26px;--h:10px;--c:#000;--x:-118px;--y:92px;--z:8px;--rx:88deg;--rz:-18deg;"></div>
180 <div class="ellipse" style="--w:26px;--h:10px;--c:#000;--x:-88px;--y:86px;--z:8px;--rx:88deg;--rz:-18deg;"></div>
181
182 <!-- cockpit openings -->
183 <div class="ellipse" style="--w:34px;--h:22px;--c:#000;--x:-28px;--y:58px;--z:18px;--rx:88deg;--rz:-8deg;"></div>
184 <div class="ellipse" style="--w:42px;--h:24px;--c:#000;--x:72px;--y:34px;--z:18px;--rx:88deg;--rz:-8deg;"></div>
185
186 <!-- canopy hints -->
187 <div class="poly" style="--w:54px;--h:28px;--pts:0 100%,18% 18%,58% 0,100% 42%,82% 100%;--c:rgba(95,90,168,.75);--x:42px;--y:42px;--z:20px;--rx:72deg;--ry:0deg;--rz:-8deg;"></div>
188 <div class="poly" style="--w:34px;--h:22px;--pts:0 100%,20% 10%,100% 0,82% 100%;--c:rgba(95,90,168,.75);--x:-18px;--y:72px;--z:18px;--rx:72deg;--ry:0deg;--rz:-8deg;"></div>
189
190 <!-- fuselage spine -->
191 <div class="poly" style="--w:360px;--h:70px;--pts:0 70%,18% 40%,72% 18%,100% 34%,88% 62%,22% 100%;--c:var(--red);--x:-20px;--y:-8px;--z:42px;--rx:8deg;--ry:0deg;--rz:-8deg;"></div>
192
193 <!-- tail boom -->
194 <div class="poly" style="--w:260px;--h:42px;--pts:0 70%,100% 0,100% 100%;--c:var(--red);--x:70px;--y:10px;--z:44px;--rx:0deg;--ry:0deg;--rz:-8deg;"></div>
195
196 <!-- rear wing -->
197 <div class="poly" style="--w:420px;--h:90px;--pts:0 52%,12% 34%,88% 18%,100% 42%,88% 66%,12% 82%;--c:var(--red);--x:-10px;--y:72px;--z:34px;--rx:88deg;--ry:0deg;--rz:-8deg;"></div>
198
199 <!-- upper wing -->
200 <div class="poly" style="--w:300px;--h:82px;--pts:0 50%,10% 26%,90% 18%,100% 42%,90% 68%,10% 82%;--c:var(--red);--x:-40px;--y:-92px;--z:118px;--rx:88deg;--ry:0deg;--rz:-8deg;"></div>
201
202 <!-- engine cowling -->
203 <div class="poly" style="--w:150px;--h:110px;--pts:12% 82%,0 48%,12% 18%,42% 0,82% 10%,100% 42%,88% 82%,52% 100%;--c:var(--red);--x:-10px;--y:-58px;--z:92px;--rx:0deg;--ry:0deg;--rz:-8deg;"></div>
204 <div class="poly" style="--w:120px;--h:44px;--pts:0 100%,10% 0,100% 12%,92% 100%;--c:var(--red);--x:-8px;--y:-82px;--z:118px;--rx:0deg;--ry:0deg;--rz:-8deg;"></div>
205
206 <!-- radiator / wood slats -->
207 <div class="poly" style="--w:92px;--h:34px;--pts:0 100%,8% 0,100% 0,92% 100%;--c:var(--wood);--x:8px;--y:-34px;--z:104px;--rx:0deg;--ry:0deg;--rz:-8deg;"></div>
208 <div class="poly" style="--w:110px;--h:12px;--pts:0 100%,100% 0,100% 100%;--c:var(--wood);--x:18px;--y:-18px;--z:108px;--rx:0deg;--ry:0deg;--rz:-8deg;"></div>
209
210 <!-- FIAT plate -->
211 <div class="poly" style="--w:72px;--h:34px;--pts:0 100%,0 0,100% 0,100% 100%;--c:var(--metal);--x:18px;--y:-58px;--z:106px;--rx:0deg;--ry:0deg;--rz:-8deg;"></div>
212 <div class="part" style="transform:translate3d(44px,-50px,107px) rotateZ(-8deg); color:#fff; font-weight:700; font-size:12px; letter-spacing:1px;">FIAT</div>
213
214 <!-- struts -->
215 <div class="poly" style="--w:8px;--h:120px;--pts:0 100%,100% 0,100% 100%;--c:var(--strut);--x:-8px;--y:-18px;--z:42px;--rx:0deg;--rz:-28deg;"></div>
216 <div class="poly" style="--w:8px;--h:120px;--pts:0 100%,100% 0,100% 100%;--c:var(--strut);--x:28px;--y:-18px;--z:42px;--rx:0deg;--rz:18deg;"></div>
217 <div class="poly" style="--w:8px;--h:120px;--pts:0 100%,100% 0,100% 100%;--c:var(--strut);--x:88px;--y:-8px;--z:42px;--rx:0deg;--rz:-28deg;"></div>
218 <div class="poly" style="--w:8px;--h:120px;--pts:0 100%,100% 0,100% 100%;--c:var(--strut);--x:118px;--y:-8px;--z:42px;--rx:0deg;--rz:18deg;"></div>
219
220 <!-- side float -->
221 <div class="poly" style="--w:92px;--h:34px;--pts:0 58%,12% 18%,88% 8%,100% 42%,88% 78%,12% 92%;--c:var(--red);--x:118px;--y:138px;--z:-8px;--rx:88deg;--rz:-8deg;"></div>
222 <div class="poly" style="--w:6px;--h:72px;--pts:0 100%,100% 0,100% 100%;--c:var(--strut);--x:138px;--y:92px;--z:18px;--rz:-18deg;"></div>
223 <div class="poly" style="--w:6px;--h:72px;--pts:0 100%,100% 0,100% 100%;--c:var(--strut);--x:168px;--y:92px;--z:18px;--rz:18deg;"></div>
224
225 <!-- tailplane -->
226 <div class="poly" style="--w:180px;--h:44px;--pts:0 50%,12% 18%,88% 18%,100% 50%,88% 82%,12% 82%;--c:var(--red);--x:250px;--y:8px;--z:42px;--rx:88deg;--rz:-8deg;"></div>
227
228 <!-- fin -->
229 <div class="poly" style="--w:72px;--h:110px;--pts:0 100%,18% 18%,42% 0,82% 18%,100% 100%;--c:linear-gradient(red,red);--x:286px;--y:-54px;--z:54px;--rx:0deg;--rz:-8deg;background:linear-gradient(90deg,var(--green) 0 33%, #fff 33% 66%, var(--red) 66% 100%);"></div>
230
231 <!-- nose cone -->
232 <div class="poly" style="--w:54px;--h:42px;--pts:0 50%,100% 0,100% 100%;--c:var(--yellow);--x:-42px;--y:-18px;--z:112px;--rx:0deg;--rz:-8deg;"></div>
233
234 <!-- white side detail -->
235 <div class="poly" style="--w:28px;--h:42px;--pts:0 50%,40% 0,100% 18%,100% 82%,40% 100%;--c:#f2f2f2;--x:-8px;--y:8px;--z:72px;--rx:0deg;--rz:-8deg;"></div>
236
237 <!-- propeller -->
238 <div class="prop">
239 <div class="blade"></div>
240 <div class="blade b2"></div>
241 <div class="hub"></div>
242 </div>
243 </div>
244 </div>
245 <div class="shadow"></div>
246</div>
247
248<script>
249 // Add radiator slats concisely
250 const plane = document.getElementById('plane');
251 for(let i=0;i<6;i++){
252 const s=document.createElement('div');
253 s.className='poly';
254 s.style.cssText=`--w:3px;--h:18px;--pts:0 100%,100% 0,100% 100%;--c:#6f4a22;--x:${26+i*12}px;--y:-30px;--z:105px;--rx:0deg;--rz:-8deg;`;
255 plane.appendChild(s);
256 }
257
258 // Add a few extra lattice struts under upper wing
259 const struts = [
260 [-18,-8,52,-42],[8,-8,52,-18],[38,-2,52,-42],[68,-2,52,-18],[98,4,52,-42]
261 ];
262 struts.forEach(([x,y,z,rz])=>{
263 const d=document.createElement('div');
264 d.className='poly';
265 d.style.cssText=`--w:5px;--h:92px;--pts:0 100%,100% 0,100% 100%;--c:var(--strut);--x:${x}px;--y:${y}px;--z:${z}px;--rz:${rz}deg;`;
266 plane.appendChild(d);
267 });
268</script>
269</body>
270</html>