← back to Single Element Spinnercompare with ground truth →
model output
GPT-5.4
Single Element Spinner
A 0.94T 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>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>