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

model output

GPT-5.4

Single Element Spinner

A 0.92T 0.34
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>Minimal Cyan Spinner</title>
7<style>
8  :root{
9    --bg:#111;
10    --cyan:#00b7ff;
11    --size:38px;
12    --stroke:3px;
13    --x:193px;
14    --y:101px;
15    --dur:1.05s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    overflow:hidden;
23    background:var(--bg);
24  }
25
26  body{
27    position:relative;
28    font-family:sans-serif;
29  }
30
31  .spinner{
32    position:absolute;
33    left:var(--x);
34    top:var(--y);
35    width:var(--size);
36    height:var(--size);
37    transform-origin:50% 50%;
38    animation: spin var(--dur) linear infinite;
39    filter: drop-shadow(0 0 1px rgba(0,183,255,.25));
40  }
41
42  .spinner::before{
43    content:"";
44    position:absolute;
45    inset:0;
46    border-radius:50%;
47    box-sizing:border-box;
48    border:var(--stroke) solid transparent;
49    border-top-color:var(--cyan);
50    border-right-color:var(--cyan);
51    border-bottom-color:var(--cyan);
52    transform:rotate(-18deg);
53  }
54
55  /* subtle unevenness to mimic the frame sequence */
56  .spinner::after{
57    content:"";
58    position:absolute;
59    inset:4px;
60    border-radius:50%;
61    box-sizing:border-box;
62    border:1px solid transparent;
63    border-top-color:rgba(0,183,255,.18);
64    transform:rotate(22deg);
65  }
66
67  @keyframes spin{
68    from{ transform:rotate(0deg); }
69    to{ transform:rotate(360deg); }
70  }
71</style>
72</head>
73<body>
74  <div class="spinner" aria-hidden="true"></div>
75</body>
76</html>