animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Animated Concepts #3

model output

LLaMA 4 Scout

Animated Concepts #3

A 0.70T 0.20
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: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .loader {
17            position: relative;
18        }
19        .loader::before, .loader::after {
20            content: '';
21            position: absolute;
22            width: 20px;
23            height: 20px;
24            border-radius: 50%;
25            background-color: #FFC107;
26        }
27        .loader::before {
28            width: 100%;
29            height: 100%;
30            border: 2px solid #FFC107;
31            border-color: #FFC107 transparent #FFC107 #FFC107;
32            animation: rotate 2s linear infinite;
33        }
34        .loader::after {
35            width: 10px;
36            height: 10px;
37            background-color: #000;
38            border-radius: 50%;
39            left: 50%;
40            top: 50%;
41            transform: translate(-50%, -50%);
42        }
43        @keyframes rotate {
44            0% {
45                transform: rotate(0deg);
46            }
47            100% {
48                transform: rotate(360deg);
49            }
50        }
51    </style>
52</head>
53<body>
54    <div class="loader"></div>
55</body>
56</html>