← back to Only CSS: Caterpillarcompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Caterpillar
A 0.71T 0.27
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>