← back to Only CSS: Porco Rosso "SAVOIA" (紅の豚)compare with ground truth →
model output
Claude Sonnet 4.6
Only CSS: Porco Rosso "SAVOIA" (紅の豚)
A 0.75T 0.42
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<style>
6 * { margin: 0; padding: 0; box-sizing: border-box; }
7 body {
8 width: 1024px;
9 height: 768px;
10 overflow: hidden;
11 background: radial-gradient(ellipse at 30% 40%, #1a2a35 0%, #0d1a22 60%, #080f14 100%);
12 }
13
14 .scene {
15 width: 100%;
16 height: 100%;
17 position: relative;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 }
22
23 .plane-wrapper {
24 position: absolute;
25 width: 500px;
26 height: 400px;
27 animation: planeRotate 4s linear infinite;
28 transform-origin: center center;
29 }
30
31 @keyframes planeRotate {
32 0% { transform: rotate(-20deg) translate(100px, -80px); }
33 100% { transform: rotate(340deg) translate(100px, -80px); }
34 }
35
36 .plane {
37 position: absolute;
38 width: 100%;
39 height: 100%;
40 }
41
42 /* Propeller spin */
43 .propeller {
44 position: absolute;
45 animation: propSpin 0.15s linear infinite;
46 transform-origin: center center;
47 }
48
49 @keyframes propSpin {
50 from { transform: rotate(0deg); }
51 to { transform: rotate(360deg); }
52 }
53</style>
54</head>
55<body>
56<div class="scene">
57 <div class="plane-wrapper">
58 <svg class="plane" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
59 <!-- Main fuselage / hull (flying boat) -->
60 <g fill="#ff0000">
61 <!-- Main hull/pontoon -->
62 <polygon points="80,220 320,200 380,230 360,280 100,290 60,260" fill="#cc0000"/>
63 <polygon points="80,220 320,200 380,230 360,280 100,290 60,260" fill="#ff0000" opacity="0.8"/>
64 <!-- Hull top -->
65 <polygon points="100,220 310,205 350,225 340,270 110,275 80,250"/>
66 <!-- Hull bottom darker -->
67 <polygon points="80,250 340,240 360,270 350,285 90,285" fill="#cc0000"/>
68
69 <!-- Cockpit area -->
70 <rect x="200" y="170" width="100" height="60" rx="5" fill="#dd0000"/>
71 <!-- Cockpit window -->
72 <ellipse cx="240" cy="210" rx="30" ry="20" fill="#111133" opacity="0.9"/>
73
74 <!-- Upper wing -->
75 <polygon points="60,180 420,160 440,175 430,185 70,200"/>
76 <!-- Wing shadow -->
77 <polygon points="60,185 420,165 440,178 430,188 70,205" fill="#cc0000"/>
78
79 <!-- Lower wing struts area -->
80 <rect x="150" y="200" width="15" height="40" fill="#cc0000"/>
81 <rect x="280" y="195" width="15" height="40" fill="#cc0000"/>
82
83 <!-- Tail section -->
84 <polygon points="320,200 420,185 430,195 420,210 320,215"/>
85
86 <!-- Vertical tail fin -->
87 <polygon points="380,140 420,185 420,210 390,210 370,160"/>
88
89 <!-- Horizontal tail -->
90 <polygon points="380,195 460,180 465,190 460,200 380,205"/>
91 <polygon points="380,200 440,210 445,220 440,225 380,210" fill="#cc0000"/>
92
93 <!-- Engine/cowling area -->
94 <rect x="130" y="175" width="70" height="55" rx="8" fill="#dd0000"/>
95 <!-- Engine top -->
96 <rect x="135" y="165" width="60" height="20" rx="4" fill="#cc0000"/>
97
98 <!-- Floats/pontoons -->
99 <rect x="140" y="280" width="80" height="25" rx="5" fill="#cc0000"/>
100 <rect x="280" y="275" width="70" height="22" rx="5" fill="#cc0000"/>
101
102 <!-- Struts to floats -->
103 <line x1="165" y1="280" x2="160" y2="260" stroke="#cc0000" stroke-width="4"/>
104 <line x1="200" y1="280" x2="195" y2="260" stroke="#cc0000" stroke-width="4"/>
105 <line x1="300" y1="275" x2="295" y2="255" stroke="#cc0000" stroke-width="4"/>
106 <line x1="330" y1="275" x2="325" y2="255" stroke="#cc0000" stroke-width="4"/>
107
108 <!-- Hull detail lines -->
109 <line x1="100" y1="255" x2="130" y2="250" stroke="#aa0000" stroke-width="2"/>
110 <line x1="100" y1="265" x2="130" y2="260" stroke="#aa0000" stroke-width="2"/>
111
112 <!-- Cockpit struts -->
113 <line x1="155" y1="200" x2="170" y2="175" stroke="#cc0000" stroke-width="3"/>
114 <line x1="290" y1="200" x2="275" y2="175" stroke="#cc0000" stroke-width="3"/>
115 <line x1="155" y1="200" x2="165" y2="220" stroke="#cc0000" stroke-width="3"/>
116 <line x1="290" y1="200" x2="280" y2="220" stroke="#cc0000" stroke-width="3"/>
117 </g>
118
119 <!-- Italian flag on tail -->
120 <g>
121 <ellipse cx="420" cy="162" rx="28" ry="18" fill="white"/>
122 <path d="M392,162 Q406,144 420,144 L420,180 Q406,180 392,162Z" fill="#009246"/>
123 <path d="M420,144 Q434,144 448,162 Q434,180 420,180Z" fill="#ce2b37"/>
124 <ellipse cx="420" cy="162" rx="28" ry="18" fill="none" stroke="#888" stroke-width="1"/>
125 </g>
126
127 <!-- Engine exhaust pipes (brown/wood colored - intake) -->
128 <rect x="155" y="168" width="55" height="12" rx="3" fill="#8B6914"/>
129 <!-- Grill lines -->
130 <line x1="165" y1="168" x2="165" y2="180" stroke="#5a4010" stroke-width="2"/>
131 <line x1="173" y1="168" x2="173" y2="180" stroke="#5a4010" stroke-width="2"/>
132 <line x1="181" y1="168" x2="181" y2="180" stroke="#5a4010" stroke-width="2"/>
133 <line x1="189" y1="168" x2="189" y2="180" stroke="#5a4010" stroke-width="2"/>
134 <line x1="197" y1="168" x2="197" y2="180" stroke="#5a4010" stroke-width="2"/>
135
136 <!-- FIAT label -->
137 <rect x="160" y="172" width="45" height="14" rx="2" fill="#aaaaaa"/>
138 <text x="182" y="183" font-size="9" font-family="Arial" font-weight="bold" fill="#333" text-anchor="middle">FIAT</text>
139
140 <!-- Propeller hub (yellow spinner) -->
141 <circle cx="148" cy="205" r="18" fill="#ffdd00"/>
142 <circle cx="148" cy="205" r="8" fill="#ddaa00"/>
143
144 <!-- Propeller blades (spinning) -->
145 <g class="propeller" style="transform-origin: 148px 205px;">
146 <!-- Blade 1 -->
147 <ellipse cx="148" cy="165" rx="10" ry="42" fill="#5a2a0a" transform="rotate(0, 148, 205)"/>
148 <!-- Blade 2 -->
149 <ellipse cx="148" cy="165" rx="10" ry="42" fill="#7a3a0a" transform="rotate(120, 148, 205)"/>
150 <!-- Blade 3 -->
151 <ellipse cx="148" cy="165" rx="10" ry="42" fill="#5a2a0a" transform="rotate(240, 148, 205)"/>
152 </g>
153
154 <!-- Re-draw spinner on top of propeller -->
155 <circle cx="148" cy="205" r="14" fill="#ffdd00"/>
156 <circle cx="148" cy="205" r="6" fill="#ddaa00"/>
157 </svg>
158 </div>
159</div>
160</body>
161</html>