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.94T 0.31
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>Blue Spinner Replica</title>
7<style>
8  :root{
9    --bg:#111;
10    --cyan:#00b7ff;
11    --size:40px;
12    --stroke:3px;
13    --x:193px;
14    --y:69px;
15    --dur:1s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  .stage{
27    position:relative;
28    width:100vw;
29    height:100vh;
30    background:var(--bg);
31  }
32
33  .spinner{
34    position:absolute;
35    left:var(--x);
36    top:var(--y);
37    width:var(--size);
38    height:var(--size);
39    border-radius:50%;
40    box-sizing:border-box;
41    border:var(--stroke) solid transparent;
42    border-top-color:var(--cyan);
43    border-right-color:var(--cyan);
44    border-bottom-color:var(--cyan);
45    transform:rotate(0deg);
46    animation: spin var(--dur) linear infinite;
47    filter: drop-shadow(0 0 1px rgba(0,183,255,.25));
48  }
49
50  @keyframes spin{
51    from{ transform:rotate(0deg); }
52    to{ transform:rotate(360deg); }
53  }
54</style>
55</head>
56<body>
57  <div class="stage">
58    <div class="spinner"></div>
59  </div>
60</body>
61</html>