animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Spinners using Font Icons

model output

LLaMA 4 Scout

Spinners using Font Icons

A 0.82T 0.22
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>Circles</title>
7    <style>
8        body {
9            background-color: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .circle {
17            position: relative;
18        }
19        .circle::before, .circle::after {
20            content: "";
21            position: absolute;
22            border-radius: 50%;
23            border: 2px solid white;
24            opacity: 0;
25            animation: appear 1s forwards;
26        }
27        .circle::before {
28            width: 40px;
29            height: 40px;
30            animation-delay: 0s;
31        }
32        .circle::after {
33            width: 60px;
34            height: 60px;
35            animation-delay: 0.5s;
36        }
37        @keyframes appear {
38            0% {
39                width: 0;
40                height: 0;
41                opacity: 1;
42            }
43            100% {
44                opacity: 1;
45                width: 100%;
46                height: 100%;
47            }
48        }
49    </style>
50</head>
51<body>
52    <div class="circle"></div>
53</body>
54</html>