← back to Only CSS: Bicyclecompare with ground truth →
model output
Claude Sonnet 4.6
Only CSS: Bicycle
A 0.83T 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>Bicycle Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background-color: #e8eaf6;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 width: 1024px;
16 height: 768px;
17 overflow: hidden;
18 position: relative;
19 }
20
21 .scene {
22 position: relative;
23 display: flex;
24 flex-direction: column;
25 align-items: center;
26 justify-content: center;
27 }
28
29 .title {
30 font-family: 'Segoe UI', sans-serif;
31 font-size: 52px;
32 color: #6b4fa0;
33 font-weight: 300;
34 margin-bottom: 20px;
35 letter-spacing: 1px;
36 }
37
38 .bike-container {
39 position: relative;
40 width: 300px;
41 height: 200px;
42 animation: bikeRotate 4s ease-in-out infinite;
43 transform-style: preserve-3d;
44 }
45
46 @keyframes bikeRotate {
47 0% { transform: perspective(600px) rotateY(0deg); }
48 30% { transform: perspective(600px) rotateY(-70deg); }
49 50% { transform: perspective(600px) rotateY(-90deg); }
50 70% { transform: perspective(600px) rotateY(-180deg); }
51 100% { transform: perspective(600px) rotateY(-360deg); }
52 }
53
54 /* Speed lines */
55 .speed-lines {
56 position: fixed;
57 top: 0; left: 0;
58 width: 100%; height: 100%;
59 pointer-events: none;
60 animation: linesAppear 4s ease-in-out infinite;
61 }
62
63 @keyframes linesAppear {
64 0%, 20% { opacity: 0; }
65 40%, 70% { opacity: 1; }
66 90%, 100%{ opacity: 0; }
67 }
68
69 .speed-line {
70 position: absolute;
71 height: 2px;
72 background: rgba(150, 130, 200, 0.5);
73 border-radius: 2px;
74 }
75
76 /* Bicycle SVG */
77 .bike-svg {
78 width: 300px;
79 height: 200px;
80 }
81
82 .shadow {
83 position: absolute;
84 bottom: -10px;
85 left: 50%;
86 transform: translateX(-50%);
87 width: 220px;
88 height: 20px;
89 background: radial-gradient(ellipse, rgba(180,170,190,0.6) 0%, transparent 70%);
90 border-radius: 50%;
91 animation: shadowAnim 4s ease-in-out infinite;
92 }
93
94 @keyframes shadowAnim {
95 0% { width: 220px; opacity: 0.6; }
96 50% { width: 60px; opacity: 0.4; }
97 100% { width: 220px; opacity: 0.6; }
98 }
99</style>
100</head>
101<body>
102
103<div class="speed-lines" id="speedLines"></div>
104
105<div class="scene">
106 <div class="title">Bicycle</div>
107 <div class="bike-container">
108 <div class="shadow"></div>
109 <svg class="bike-svg" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
110 <!-- Left wheel -->
111 <circle cx="75" cy="145" r="52" fill="none" stroke="#111" stroke-width="10"/>
112 <circle cx="75" cy="145" r="44" fill="none" stroke="white" stroke-width="2"/>
113 <!-- Left wheel spokes -->
114 <g stroke="#ccc" stroke-width="1.2">
115 <line x1="75" y1="101" x2="75" y2="189"/>
116 <line x1="31" y1="145" x2="119" y2="145"/>
117 <line x1="44" y1="114" x2="106" y2="176"/>
118 <line x1="106" y1="114" x2="44" y2="176"/>
119 <line x1="37" y1="130" x2="113" y2="160"/>
120 <line x1="37" y1="160" x2="113" y2="130"/>
121 <line x1="60" y1="103" x2="90" y2="187"/>
122 <line x1="90" y1="103" x2="60" y2="187"/>
123 </g>
124 <circle cx="75" cy="145" r="6" fill="#7b5ea7"/>
125
126 <!-- Right wheel -->
127 <circle cx="225" cy="145" r="52" fill="none" stroke="#111" stroke-width="10"/>
128 <circle cx="225" cy="145" r="44" fill="none" stroke="white" stroke-width="2"/>
129 <!-- Right wheel spokes -->
130 <g stroke="#ccc" stroke-width="1.2">
131 <line x1="225" y1="101" x2="225" y2="189"/>
132 <line x1="181" y1="145" x2="269" y2="145"/>
133 <line x1="194" y1="114" x2="256" y2="176"/>
134 <line x1="256" y1="114" x2="194" y2="176"/>
135 <line x1="187" y1="130" x2="263" y2="160"/>
136 <line x1="187" y1="160" x2="263" y2="130"/>
137 <line x1="210" y1="103" x2="240" y2="187"/>
138 <line x1="240" y1="103" x2="210" y2="187"/>
139 </g>
140 <circle cx="225" cy="145" r="6" fill="#7b5ea7"/>
141
142 <!-- Frame -->
143 <!-- Main triangle: bottom bracket to rear dropout to head tube -->
144 <!-- Chain stay: bottom bracket to rear axle -->
145 <line x1="150" y1="145" x2="75" y2="145" stroke="#7b5ea7" stroke-width="8" stroke-linecap="round"/>
146 <!-- Seat stay: rear axle to seat tube top -->
147 <line x1="75" y1="145" x2="148" y2="75" stroke="#7b5ea7" stroke-width="8" stroke-linecap="round"/>
148 <!-- Top tube: seat to head -->
149 <line x1="148" y1="75" x2="210" y2="75" stroke="#7b5ea7" stroke-width="8" stroke-linecap="round"/>
150 <!-- Down tube: head to bottom bracket -->
151 <line x1="210" y1="75" x2="150" y2="145" stroke="#7b5ea7" stroke-width="8" stroke-linecap="round"/>
152 <!-- Seat tube -->
153 <line x1="148" y1="75" x2="150" y2="145" stroke="#7b5ea7" stroke-width="8" stroke-linecap="round"/>
154 <!-- Fork: head tube to front axle -->
155 <line x1="210" y1="75" x2="225" y2="145" stroke="#7b5ea7" stroke-width="8" stroke-linecap="round"/>
156 <!-- Chain stay 2: bottom bracket to front -->
157 <line x1="150" y1="145" x2="225" y2="145" stroke="#7b5ea7" stroke-width="8" stroke-linecap="round"/>
158
159 <!-- Seat post -->
160 <line x1="148" y1="75" x2="140" y2="55" stroke="#7b5ea7" stroke-width="7" stroke-linecap="round"/>
161 <!-- Seat -->
162 <rect x="115" y="48" width="55" height="12" rx="4" fill="#333"/>
163
164 <!-- Handlebar stem -->
165 <line x1="210" y1="75" x2="215" y2="50" stroke="#7b5ea7" stroke-width="7" stroke-linecap="round"/>
166 <!-- Handlebar -->
167 <line x1="200" y1="50" x2="235" y2="50" stroke="#7b5ea7" stroke-width="7" stroke-linecap="round"/>
168
169 <!-- Pedal crank -->
170 <circle cx="150" cy="145" r="8" fill="#6a3fa0"/>
171 <line x1="138" y1="152" x2="162" y2="138" stroke="#6a3fa0" stroke-width="5" stroke-linecap="round"/>
172 </svg>
173 </div>
174</div>
175
176<script>
177 // Generate speed lines
178 const container = document.getElementById('speedLines');
179 const lineConfigs = [
180 { top: 8, left: 5, width: 120, angle: -30 },
181 { top: 12, left: 55, width: 80, angle: -25 },
182 { top: 45, left: 0, width: 60, angle: -20 },
183 { top: 55, left: 60, width: 100, angle: -15 },
184 { top: 60, left: 10, width: 140, angle: -10 },
185 { top: 65, left: 5, width: 90, angle: -8 },
186 { top: 70, left: 0, width: 110, angle: -5 },
187 { top: 75, left: 55, width: 130, angle: -3 },
188 { top: 80, left: 0, width: 80, angle: 0 },
189 { top: 85, left: 60, width: 100, angle: 0 },
190 { top: 90, left: 5, width: 120, angle: 3 },
191 { top: 20, right: 5, width: 80, angle: -35 },
192 { top: 30, right: 10, width: 100, angle: -40 },
193 { top: 50, right: 0, width: 70, angle: 20 },
194 { top: 60, right: 5, width: 90, angle: 15 },
195 { top: 70, right: 10, width: 110, angle: 10 },
196 { top: 80, right: 0, width: 80, angle: 5 },
197 ];
198
199 lineConfigs.forEach((cfg, i) => {
200 const line = document.createElement('div');
201 line.className = 'speed-line';
202 line.style.top = cfg.top + '%';
203 if (cfg.left !== undefined) line.style.left = cfg.left + 'px';
204 if (cfg.right !== undefined) line.style.right = cfg.right + 'px';
205 line.style.width = cfg.width + 'px';
206 line.style.transform = `rotate(${cfg.angle}deg)`;
207 line.style.opacity = (0.3 + Math.random() * 0.4).toString();
208 container.appendChild(line);
209 });
210</script>
211</body>
212</html>