← back to Only CSS: Japanese "人力車"compare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Japanese "人力車"
A 0.44T 0.00
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5 .wheelbarrow {
6 position: relative;
7 width: 200px;
8 height: 100px;
9 }
10 .box {
11 position: absolute;
12 top: 20px;
13 left: 20px;
14 width: 160px;
15 height: 60px;
16 background: linear-gradient(to bottom, yellow, red);
17 }
18 .wheel-left {
19 position: absolute;
20 top: 80px;
21 left: 30px;
22 width: 40px;
23 height: 40px;
24 border-radius: 50%;
25 border: 2px solid black;
26 }
27 .wheel-right {
28 position: absolute;
29 top: 80px;
30 right: 30px;
31 width: 40px;
32 height: 40px;
33 border-radius: 50%;
34 border: 2px solid black;
35 }
36 .axle {
37 position: absolute;
38 top: 90px;
39 left: 50px;
40 width: 100px;
41 height: 2px;
42 background-color: black;
43 }
44 .triangle {
45 position: absolute;
46 top: 0;
47 left: 0;
48 width: 0;
49 height: 0;
50 border-style: solid;
51 border-width: 0 100px 140px 100px;
52 border-color: transparent transparent black transparent;
53 }
54</style>
55</head>
56<body>
57<div class="wheelbarrow">
58 <div class="box"></div>
59 <div class="wheel-left"></div>
60 <div class="wheel-right"></div>
61 <div class="axle"></div>
62 <div class="triangle"></div>
63</div>
64
65<script>
66 // Animation function
67 function animate() {
68 const wheelbarrow = document.querySelector('.wheelbarrow');
69 const box = document.querySelector('.box');
70 const wheelLeft = document.querySelector('.wheel-left');
71 const wheelRight = document.querySelector('.wheel-right');
72 const axle = document.querySelector('.axle');
73 const triangle = document.querySelector('.triangle');
74
75 let angle = 0;
76
77 function rotate() {
78 angle += 1;
79 wheelbarrow.style.transform = `rotate(${angle}deg)`;
80 if (angle < 360) {
81 requestAnimationFrame(rotate);
82 }
83 }
84
85 rotate();
86 360deg) {
87 wheelbarrow.style.transform = `rotate(360deg)`;
88 }
89 }
90
91 animate();
92</script>
93</body>
94</html>