← back to Nice spinny stuffcompare with ground truth →
model output
Claude Sonnet 4.6
Nice spinny stuff
A 0.93T 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>Pink Dots Spinner</title>
7<style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 background: white;
16 width: 100vw;
17 height: 100vh;
18 overflow: hidden;
19 }
20
21 .spinner {
22 position: absolute;
23 left: 155px;
24 top: 160px;
25 width: 0;
26 height: 0;
27 animation: rotate 1.2s linear infinite;
28 }
29
30 @keyframes rotate {
31 from { transform: rotate(0deg); }
32 to { transform: rotate(360deg); }
33 }
34
35 .dot {
36 position: absolute;
37 border-radius: 50%;
38 background: #ffb3c6;
39 transform-origin: center center;
40 }
41
42 /* 8 dots arranged in a circle, each offset by 45deg */
43 /* Dots at different angles with varying sizes and opacities */
44 .dot:nth-child(1) {
45 width: 8px;
46 height: 8px;
47 top: -30px;
48 left: -4px;
49 opacity: 1;
50 }
51
52 .dot:nth-child(2) {
53 width: 7px;
54 height: 7px;
55 top: -22px;
56 left: 18px;
57 opacity: 0.85;
58 }
59
60 .dot:nth-child(3) {
61 width: 6px;
62 height: 6px;
63 top: -4px;
64 left: 28px;
65 opacity: 0.7;
66 }
67
68 .dot:nth-child(4) {
69 width: 5px;
70 height: 5px;
71 top: 16px;
72 left: 20px;
73 opacity: 0.5;
74 }
75
76 .dot:nth-child(5) {
77 width: 4px;
78 height: 4px;
79 top: 24px;
80 left: -2px;
81 opacity: 0.35;
82 }
83
84 .dot:nth-child(6) {
85 width: 3px;
86 height: 3px;
87 top: 16px;
88 left: -22px;
89 opacity: 0.2;
90 }
91
92 .dot:nth-child(7) {
93 width: 2px;
94 height: 2px;
95 top: -2px;
96 left: -28px;
97 opacity: 0.12;
98 }
99
100 .dot:nth-child(8) {
101 width: 2px;
102 height: 2px;
103 top: -20px;
104 left: -20px;
105 opacity: 0.07;
106 }
107</style>
108</head>
109<body>
110 <div class="spinner">
111 <div class="dot"></div>
112 <div class="dot"></div>
113 <div class="dot"></div>
114 <div class="dot"></div>
115 <div class="dot"></div>
116 <div class="dot"></div>
117 <div class="dot"></div>
118 <div class="dot"></div>
119 </div>
120</body>
121</html>