← back to Nice spinny stuffcompare with ground truth →
model output
GPT-5.4
Nice spinny stuff
A 0.91T 0.33
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" />
6<title>Pink Dot Spinner</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background: #fff;
14 }
15
16 .stage {
17 position: relative;
18 width: 100vw;
19 height: 100vh;
20 background: #fff;
21 }
22
23 /* Positioned to match the upper-left placement in the frames */
24 .spinner {
25 position: absolute;
26 left: 110px;
27 top: 110px;
28 width: 110px;
29 height: 110px;
30 transform-origin: 50% 50%;
31 animation: spin 1.15s linear infinite;
32 }
33
34 .dot {
35 position: absolute;
36 left: 50%;
37 top: 50%;
38 border-radius: 50%;
39 background: #ffc0cb;
40 transform-origin: 0 0;
41 opacity: 0.9;
42 filter: blur(0.15px);
43 }
44
45 @keyframes spin {
46 from { transform: rotate(0deg); }
47 to { transform: rotate(360deg); }
48 }
49</style>
50</head>
51<body>
52<div class="stage">
53 <div class="spinner" id="spinner"></div>
54</div>
55
56<script>
57 const spinner = document.getElementById('spinner');
58
59 // 8 dots arranged on a partial ring, with varying sizes to mimic the frames.
60 const count = 8;
61 const radius = 28;
62 const startDeg = -150;
63 const stepDeg = 34;
64
65 // Sizes chosen to resemble the alternating larger/smaller pink circles.
66 const sizes = [8, 10, 13, 18, 15, 11, 8, 6];
67
68 for (let i = 0; i < count; i++) {
69 const dot = document.createElement('div');
70 dot.className = 'dot';
71
72 const angle = (startDeg + i * stepDeg) * Math.PI / 180;
73 const x = Math.cos(angle) * radius;
74 const y = Math.sin(angle) * radius;
75 const s = sizes[i];
76
77 dot.style.width = s + 'px';
78 dot.style.height = s + 'px';
79 dot.style.transform = `translate(${x}px, ${y}px) translate(${-s/2}px, ${-s/2}px)`;
80 spinner.appendChild(dot);
81 }
82</script>
83</body>
84</html>