← back to Only CSS: Caterpillarcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Caterpillar
A 0.68T 0.32
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>Animation</title>
7 <style>
8 body {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: white;
14 overflow: hidden;
15 }
16 .logo {
17 width: 80px;
18 height: 40px;
19 position: relative;
20 animation: rotate 2s ease-in-out infinite alternate;
21 }
22 .logo::before, .logo::after {
23 content: "";
24 position: absolute;
25 width: 40px;
26 height: 20px;
27 background-color: black;
28 top: 0;
29 left: 0;
30 transform-origin: center;
31 }
32 .logo::before {
33 transform: rotate(-45deg);
34 }
35 .logo::after {
36 transform: rotate(45deg);
37 }
38 .middle {
39 position: absolute;
40 width: 40px;
41 height: 20px;
42 background-color: #00aaff;
43 top: 0;
44 left: 0;
45 transform-origin: center;
46 animation: pulse 2s ease-in-out infinite alternate;
47 }
48 @keyframes rotate {
49 0% {
50 transform: rotate(0deg);
51 }
52 100% {
53 transform: rotate(180deg);
54 }
55 }
56 @keyframes pulse {
57 0% {
58 transform: scale(1);
59 }
60 100% {
61 transform: scale(1.1);
62 }
63 }
64 </style>
65</head>
66<body>
67 <div class="logo">
68 <div class="middle"></div>
69 </div>
70</body>
71</html>