← back to Only CSS: Porco Rosso "SAVOIA" (紅の豚)compare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Porco Rosso "SAVOIA" (紅の豚)
A 0.65T 0.51
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>Savoia S.21 Animation</title>
7 <style>
8 :root {
9 --red: #d40000;
10 --yellow: #ffcc00;
11 --engine: #444;
12 --bg: #0b111a;
13 --wood: #8b4513;
14 }
15
16 body {
17 margin: 0;
18 height: 100vh;
19 background: radial-gradient(circle, #1a2a3a 0%, var(--bg) 100%);
20 overflow: hidden;
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 perspective: 1200px;
25 }
26
27 .scene {
28 width: 100vw;
29 height: 100vh;
30 display: flex;
31 justify-content: center;
32 align-items: center;
33 transform-style: preserve-3d;
34 }
35
36 .plane {
37 position: relative;
38 transform-style: preserve-3d;
39 animation: fly 8s infinite alternate ease-in-out;
40 }
41
42 /* Fuselage */
43 .fuselage {
44 position: absolute;
45 width: 300px;
46 height: 60px;
47 background: var(--red);
48 transform: translateZ(-50px);
49 clip-path: polygon(0% 40%, 10% 20%, 80% 20%, 100% 50%, 80% 80%, 10% 80%, 0% 60%);
50 border-radius: 20px 50px 50px 20px;
51 }
52
53 /* Cockpit holes */
54 .fuselage::before {
55 content: '';
56 position: absolute;
57 top: 15px;
58 left: 80px;
59 width: 40px;
60 height: 30px;
61 background: #111;
62 border-radius: 50%;
63 }
64
65 /* Wings */
66 .wing-main {
67 position: absolute;
68 width: 500px;
69 height: 100px;
70 background: var(--red);
71 top: -20px;
72 left: -100px;
73 transform: translateZ(20px);
74 border-radius: 20px;
75 box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
76 }
77
78 /* Engine Pod */
79 .engine-pod {
80 position: absolute;
81 width: 120px;
82 height: 60px;
83 background: var(--red);
84 top: -90px;
85 left: 90px;
86 transform: translateZ(50px);
87 border-radius: 10px;
88 }
89
90 .engine-block {
91 position: absolute;
92 width: 100px;
93 height: 40px;
94 background: var(--engine);
95 top: 5px;
96 left: 10px;
97 border-radius: 5px;
98 }
99
100 .engine-label {
101 position: absolute;
102 top: 10px;
103 left: 20px;
104 color: #fff;
105 font-family: Arial, sans-serif;
106 font-weight: bold;
107 font-size: 14px;
108 transform: scaleX(1.5);
109 }
110
111 /* Propeller */
112 .propeller-hub {
113 position: absolute;
114 width: 30px;
115 height: 30px;
116 background: var(--yellow);
117 border-radius: 50%;
118 top: 15px;
119 left: -15px;
120 transform-style: preserve-3d;
121 }
122
123 .propeller-blades {
124 position: absolute;
125 width: 160px;
126 height: 15px;
127 background: var(--wood);
128 top: 7.5px;
129 left: -65px;
130 border-radius: 50%;
131 animation: spin 0.15s infinite linear;
132 }
133
134 /* Tail */
135 .tail-vert {
136 position: absolute;
137 width: 100px;
138 height: 120px;
139 background: var(--red);
140 right: -20px;
141 top: -80px;
142 clip-path: polygon(20% 100%, 100% 100%, 100% 0, 50% 0);
143 transform: rotateY(90deg);
144 }
145
146 .tail-stripe {
147 position: absolute;
148 width: 100%;
149 height: 33%;
150 bottom: 0;
151 }
152 .green { background: #008c45; top: 0; height: 33%; }
153 .white { background: #ffffff; top: 33%; height: 34%; }
154 .red-s { background: #cd212a; top: 67%; height: 33%; }
155
156 /* Tail Fin Italian Flag */
157 .fin {
158 position: absolute;
159 right: -30px;
160 top: -60px;
161 width: 60px;
162 height: 80px;
163 display: flex;
164 flex-direction: column;
165 border-radius: 50% 50% 0 0;
166 overflow: hidden;
167 transform: rotateY(90deg) translateZ(10px);
168 }
169
170 /* Floats */
171 .float {
172 position: absolute;
173 width: 80px;
174 height: 20px;
175 background: var(--red);
176 bottom: -80px;
177 border-radius: 5px 20px 20px 5px;
178 }
179 .float.left { left: -50px; transform: translateZ(50px); }
180 .float.right { left: 270px; transform: translateZ(50px); }
181
182 /* Animations */
183 @keyframes spin {
184 from { transform: rotateX(0deg); }
185 to { transform: rotateX(360deg); }
186 }
187
188 @keyframes fly {
189 0% {
190 transform: translate3d(200px, -50px, -400px) rotateY(-110deg) rotateX(10deg) rotateZ(5deg);
191 }
192 100% {
193 transform: translate3d(-150px, 150px, 300px) rotateY(-190deg) rotateX(40deg) rotateZ(-15deg);
194 }
195 }
196
197 /* Float Struts */
198 .strut {
199 position: absolute;
200 width: 4px;
201 height: 60px;
202 background: #222;
203 top: 20px;
204 }
205 .strut-l { left: -10px; transform: rotate(15deg); }
206 .strut-r { left: 310px; transform: rotate(-15deg); }
207
208 </style>
209</head>
210<body>
211
212 <div class="scene">
213 <div class="plane">
214 <!-- Main Body -->
215 <div class="fuselage"></div>
216
217 <!-- Wing -->
218 <div class="wing-main"></div>
219
220 <!-- Engine -->
221 <div class="engine-pod">
222 <div class="engine-block">
223 <div class="engine-label">FIAT</div>
224 </div>
225 <div class="propeller-hub">
226 <div class="propeller-blades"></div>
227 </div>
228 </div>
229
230 <!-- Tail -->
231 <div class="fin">
232 <div class="green" style="height:33%"></div>
233 <div class="white" style="height:33%"></div>
234 <div class="red-s" style="height:34%"></div>
235 </div>
236
237 <!-- Floats -->
238 <div class="float left"></div>
239 <div class="float right"></div>
240 <div class="strut strut-l"></div>
241 <div class="strut strut-r"></div>
242 </div>
243 </div>
244
245 <script>
246 // Optional: Adding slight turbulence via JS for more realism
247 const plane = document.querySelector('.plane');
248 let floatX = 0;
249 let floatY = 0;
250
251 function animate() {
252 floatX = Math.sin(Date.now() * 0.002) * 5;
253 floatY = Math.cos(Date.now() * 0.0015) * 5;
254 // The transform here would override the CSS animation,
255 // so we handle the base animation in CSS and just enjoy the ride.
256 // For a pure CSS version, the keyframes are sufficient.
257 requestAnimationFrame(animate);
258 }
259 animate();
260 </script>
261</body>
262</html>