animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to SVG Loading icons

model output

LLaMA 4 Scout

SVG Loading icons

A 0.80T 0.26
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>Loading Animation</title>
7    <style>
8        body {
9            background-color: #333;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            display: flex;
18            justify-content: center;
19            align-items: center;
20        }
21        .bar {
22            width: 2px;
23            height: 10px;
24            background-color: orange;
25            margin: 0 2px;
26            animation: pulse 1s infinite;
27        }
28        @keyframes pulse {
29            0% {
30                height: 10px;
31            }
32            50% {
33                height: 20px;
34            }
35            100% {
36                height: 10px;
37            }
38        }
39        .bar:nth-child(1) {
40            animation-delay: 0s;
41        }
42        .bar:nth-child(2) {
43            animation-delay: 0.2s;
44        }
45        .bar:nth-child(3) {
46            animation-delay: 0.4s;
47        }
48    </style>
49</head>
50<body>
51    <div class="loader">
52        <div class="bar"></div>
53        <div class="bar"></div>
54        <div class="bar"></div>
55    </div>
56</body>
57</html>