← back to Spinners using Font Iconscompare with ground truth →
model output
LLaMA 4 Scout
Spinners using Font Icons
A 0.62T 0.25
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>