animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Such Spinners, Much Loading

model output

LLaMA 4 Scout

Such Spinners, Much Loading

A 0.83T 0.14
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>Eclipse Animation</title>
7    <style>
8        body {
9            background-color: #fff;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            width: 100vw;
16        }
17        .eclipse {
18            position: relative;
19            width: 100px;
20            height: 100px;
21        }
22        .circle {
23            position: absolute;
24            top: 50%;
25            left: 50%;
26            transform: translate(-50%, -50%);
27            width: 100%;
28            height: 100%;
29            border-radius: 50%;
30            background-color: #000;
31            clip-path: circle(50% at 50% 50%);
32        }
33        .hole {
34            position: absolute;
35            top: 50%;
36            left: 50%;
37            transform: translate(-50%, -50%);
38            width: 50px;
39            height: 50px;
40            border-radius: 50%;
41            background-color: #fff;
42        }
43    </style>
44</head>
45<body>
46    <div class="eclipse">
47        <div class="circle"></div>
48        <div class="hole"></div>
49    </div>
50</body>
51</html>