animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Simple Spinner

model output

LLaMA 4 Scout

Simple Spinner

A 0.66T 0.29
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>Color Changing Circle Animation</title>
7    <style>
8        body {
9            background-color: #0000ff;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .circle {
17            width: 20px;
18            height: 20px;
19            border-radius: 50%;
20            position: relative;
21        }
22    </style>
23</head>
24<body>
25    <div class="circle"></div>
26
27    <script>
28        const circle = document.querySelector('.circle');
29        let hue = 0;
30
31        function animate() {
32            circle.style.background = `conic-gradient(hsl(${hue}, 100%, 50%), hsl(${hue + 120}, 100%, 50%))`;
33            hue = (hue + 1) % 360;
34            requestAnimationFrame(animate);
35        }
36
37        animate();
38    </script>
39</body>
40</html>