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

model output

LLaMA 4 Scout

Only CSS: Caterpillar

A 0.71T 0.27
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>BMW Logo Animation</title>
7    <style>
8        .logo {
9            position: absolute;
10            top: 50%;
11            left: 50%;
12            transform: translate(-50%, -50%);
13            width: 100px;
14            height: 50px;
15            background-color: #000;
16            clip-path: polygon(10% 50%, 50% 10%, 90% 50%, 50% 90%);
17            animation: rotate 5s linear infinite;
18        }
19        .blue-strip {
20            position: absolute;
21            top: 50%;
22            left: 50%;
23            transform: translate(-50%, -50%);
24            width: 40px;
25            height: 20px;
26            background-color: #03A9F4;
27        }
28
29        @keyframes rotate {
30            0% {
31                transform: translate(-50%, -50%) rotate(0deg);
32            }
33            100% {
34                transform: translate(-50%, -50%) rotate(360deg);
35            }
36        }
37    </style>
38</head>
39<body>
40    <div class="logo">
41        <div class="blue-strip"></div>
42    </div>
43</body>
44</html>