animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Simple Spinner

model output

LLaMA 4 Scout

Simple Spinner

A 0.74T 0.14
compare with ground truth →
1<!DOCTYPE html>
2<html>
3<head>
4  <style>
5    body {
6      background-color: #000;
7      display: flex;
8      justify-content: center;
9      align-items: center;
10      height: 100vh;
11      margin: 0;
12    }
13    .circle {
14      position: relative;
15      width: 20px;
16      height: 20px;
17      border-radius: 50%;
18      animation: pulse 2s infinite;
19    }
20    @keyframes pulse {
21      0% {
22        opacity: 1;
23        border: 2px solid #03A9F4;
24      }
25      16.67% {
26        opacity: 1;
27        border: 2px solid #03A9F4;
28      }
29      33.33% {
30        opacity: 1;
31        border: 2px solid #8BC34A;
32      }
33      50% {
34        opacity: 1;
35        border: 2px solid #FF9800;
36      }
37      66.67% {
38        opacity: 1;
39        border: 2px solid #E91E63;
40      }
41      83.33% {
42        opacity: 1;
43        border: 2px solid #FFC107;
44      }
45      100% {
46        opacity: 1;
47        border: 2px solid #8BC34A;
48      }
49    }
50    .pulse-circle {
51      position: absolute;
52      top: 50%;
53      left: 50%;
54      transform: translate(-50%, -50%);
55      width: 10px;
56      height: 10px;
57      border-radius: 50%;
58      background-color: #fff;
59      animation: pulse-color 2s infinite;
60    }
61    @keyframes pulse-color {
62      0% {
63        background-color: #03A9F4;
64        box-shadow: 0 0 0 2px #03A9F4;
65      }
66      16.67% {
67        background-color: #03A9F4;
68        box-shadow: 0 0 0 2px #03A9F4;
69      }
70      33.33% {
71        background-color: #8BC34A;
72        box-shadow: 0 0 0 2px #8BC34A;
73      }
74      50% {
75        background-color: #FF9800;
76        box-shadow: 0 0 0 2px #FF9800;
77      }
78      66.67% {
79        background-color: #E91E63;
80        box-shadow: 0 0 0 2px #E91E63;
81      }
82      83.33% {
83        background-color: #FFC107;
84        box-shadow: 0 0 0 2px #FFC107;
85      }
86      100% {
87        background-color: #8BC34A;
88        box-shadow: 0 0 0 2px #8BC34A;
89      }
90    }
91  </style>
92</head>
93<body>
94  <div class="circle"></div>
95</body>
96</html>