animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Japanese "人力車"

model output

LLaMA 4 Scout

Only CSS: Japanese "人力車"

A 0.44T 0.00
compare with ground truth →
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>