← back to Only CSS: Bicyclecompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Bicycle
A 0.41T 0.29
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 body {
9 background-color: #f0f0f0;
10 font-family: Arial, sans-serif;
11 margin: 0;
12 padding: 0;
13 }
14 .bicycle {
15 position: absolute;
16 top: 50%;
17 left: 50%;
18 transform: translate(-50%, -50%);
19 width: 200px;
20 height: 150px;
21 background-color: purple;
22 border-radius: 10px;
23 }
24 .bicycle .wheel {
25 position: absolute;
26 width: 20px;
27 height: 20px;
28 border-radius: 50%;
29 background-color: black;
30 }
31 .bicycle .wheel.left {
32 top: 120px;
33 left: 30px;
34 }
35 .bicycle .wheel.right {
36 top: 120px;
37 right: 30px;
38 }
39 .bicycle .frame {
40 position: absolute;
41 top: 0;
42 left: 0;
43 width: 100%;
44 height: 100%;
45 background-color: purple;
46 clip-path: polygon(50% 0%, 70% 100%, 30% 100%);
47 }
48 .bicycle .seat {
49 position: absolute;
50 top: 50px;
51 left: 50%;
52 transform: translateX(-50%);
53 width: 50px;
54 height: 20px;
55 background-color: black;
56 }
57 .bicycle .handlebars {
58 position: absolute;
59 top: 30px;
60 left: 50%;
61 transform: translateX(-50%);
62 width: 50px;
63 height: 20px;
64 background-color: purple;
65 }
66 .text {
67 position: absolute;
68 top: 30px;
69 left: 50%;
70 transform: translateX(-50%);
71 font-size: 30px;
72 font-weight: bold;
73 color: purple;
74 }
75 @keyframes spin {
76 0% {
77 transform: translate(-50%, -50%) rotate(0deg);
78 }
79 100% {
80 transform: translate(-50%, -50%) rotate(360deg);
81 }
82 }
83 .text {
84 animation: spin 5s linear infinite;
85 }
86 </style>
87 </head>
88 <body>
89 <div class="bicycle">
90 <div class="wheel left"></div>
91 <div class="wheel right"></div>
92 <div class="frame"></div>
93 <div class="seat"></div>
94 <div class="handlebars"></div>
95 </div>
96 <div class="text">Bicycle</div>
97 </body>
98</html>