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.62T 0.25
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>Crescent Animation</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  .crescent {
17    position: relative;
18    width: 50px;
19    height: 50px;
20  }
21  .crescent::before {
22    content: "";
23    position: absolute;
24    width: 50px;
25    height: 25px;
26    background: white;
27    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
28    transform: rotate(0deg);
29  }
30  .crescent::after {
31    content: "";
32    position: absolute;
33    top: 25px;
34    width: 50px;
35    height: 25px;
36    background: white;
37    border-radius: 0 0 50% 50% / 0 0 100% 100%;
38    transform: rotate(0deg);
39  }
40  .animate {
41    animation: rotate 5s linear infinite;
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="crescent animate"></div>
55</body>
56</html>