animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Nice spinny stuff

model output

LLaMA 4 Scout

Nice spinny stuff

A 0.54T 0.33
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>Animation</title>
7    <style>
8        .dot {
9            position: absolute;
10            border-radius: 50%;
11            background-color: #FFC5C5; /* Light pink color */
12        }
13    </style>
14</head>
15<body>
16    <script>
17        // Define the animation
18        function animate() {
19            // Remove existing dots
20            const dots = document.querySelectorAll('.dot');
21            dots.forEach(dot => dot.remove());
22
23            // Create new dots
24            let angle = Math.PI / 2; // 90 degrees
25            const centerX = 50;
26            const centerY = 50;
27            const radius = 20;
28            const numDots = 10;
29            for (let i = 0; i < numDots; i++) {
30                const dot = document.createElement('div');
31                dot.className = 'dot';
32                const x = centerX + Math.cos(angle) * radius * (numDots - i);
33                const y = centerY + Math.sin(angle) * radius * (numDots - i);
34                dot.style.left = `${x}px`;
35                dot.style.top = `${y}px`;
36                dot.style.width = `${10 + (numDots - i) * 2}px`;
37                dot.style.height = `${10 + (numDots - i) * 2}px`;
38                document.body.appendChild(dot);
39
40                // Update angle for next dot
41                angle += Math.PI / 10; // Spread dots around a circle
42            }
43
44            // Animate dots
45            function moveDots() {
46                const dots = document.querySelectorAll('.dot');
47                dots.forEach((dot, index) => {
48                    const rect = dot.getBoundingClientRect();
49                    const newX = rect.left + 5;
50                    const newY = rect.top;
51                    dot.style.left = `${newX}px`;
52                    if (newX > window.innerWidth) {
53                        dot.remove();
54                    }
55                });
56                if (dots.length < numDots) {
57                    const newDot = document.createElement('div');
58                    newDot.className = 'dot';
59                    newDot.style.left = '0px';
60                    newDot.style.top = `${centerY}px`;
61                    newDot.style.width = '10px';
62                    newDot.style.height = '10px';
63                    document.body.appendChild(newDot);
64                    angle += Math.PI / 10;
65                }
66            }
67            setInterval(moveDots, 1000 / 60); // 60 FPS
68        }
69        animate();
70    </script>
71</body>
72</html>