animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Bicycle

model output

LLaMA 4 Scout

Only CSS: Bicycle

A 0.41T 0.29
compare with ground truth →
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>