← back to Single Element Spinnercompare with ground truth →
model output
GPT-5.4
Single Element Spinner
A 0.90T 0.31
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>Rotating Blue Ring</title>
7<style>
8 :root{
9 --bg:#111;
10 --ring:#11b8ff;
11 --size:42px;
12 --stroke:2px;
13 --dur:1s;
14 }
15
16 html,body{
17 margin:0;
18 width:100%;
19 height:100%;
20 background:var(--bg);
21 overflow:hidden;
22 }
23
24 .stage{
25 position:relative;
26 width:100vw;
27 height:100vh;
28 background:var(--bg);
29 }
30
31 /* Positioned to match the frames: small ring near upper-left */
32 .spinner{
33 position:absolute;
34 left:193px;
35 top:70px;
36 width:var(--size);
37 height:var(--size);
38 border-radius:50%;
39 box-sizing:border-box;
40 border:var(--stroke) solid rgba(17,184,255,.18);
41 border-top-color:var(--ring);
42 border-right-color:var(--ring);
43 box-shadow:
44 0 0 0 1px rgba(17,184,255,.04) inset,
45 0 0 6px rgba(17,184,255,.18);
46 animation: spin var(--dur) linear infinite;
47 }
48
49 @keyframes spin{
50 from{ transform:rotate(0deg); }
51 to{ transform:rotate(360deg); }
52 }
53</style>
54</head>
55<body>
56 <div class="stage">
57 <div class="spinner"></div>
58 </div>
59</body>
60</html>