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.46T 0.00
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>Heart Animation</title>
7    <style>
8        .heart {
9            position: relative;
10            width: 100px;
11            height: 100px;
12        }
13        .dot {
14            position: absolute;
15            width: 10px;
16            height: 10px;
17            border-radius: 50%;
18            background-color: pink;
19            transform: translate(50%, 50%);
20        }
21        @keyframes heart-animation {
22            0% {
23                opacity: 1;
24                transform: scale(1);
25            }
26            100% {
27                opacity: 1;
28                transform: scale(1);
29            }
30        }
31        .heart-container {
32            position: absolute;
33            top: 50%;
34            left: 50%;
35            transform: translate(-50%, -50%);
36            animation: heart-animation 3s infinite;
37        }
38    </style>
39</head>
40<body>
41    <div class="heart-container">
42        <div class="heart">
43            <div class="dot" style="top: 10%; left: 20%;"></div>
44            <div class="dot" style="top: 20%; left: 30%;"></div>
45            <div class="dot" style="top: 30%; left: 40%;"></div>
46            <div class="dot" style="top: 40%; left: 50%;"></div>
47            <div class="dot" style="top: 50%; left: 60%;"></div>
48            <div class="dot" style="top: 60%; left: 70%;"></div>
49            <div class="dot" style="top: 70%; left: 80%;"></div>
50            <div class="dot" style="top: 80%; left: 90%;"></div>
51            <div class="dot" style="top: 90%; left: 10%;"></div>
52        </div>
53    </div>
54    <script>
55        // No JavaScript needed for this animation
56    </script>
57</body>
58</html>