← back to Nice spinny stuffcompare with ground truth →
model output
Claude Sonnet 4.6
Nice spinny stuff
A 0.96T 0.35
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5 * { margin: 0; padding: 0; box-sizing: border-box; }
6 body { background: white; width: 100vw; height: 100vh; }
7
8 .container {
9 position: absolute;
10 left: 155px;
11 top: 155px;
12 width: 0;
13 height: 0;
14 }
15
16 .dot {
17 position: absolute;
18 border-radius: 50%;
19 background: #ffb3c1;
20 transform-origin: center center;
21 }
22
23 @keyframes orbit {
24 from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
25 to { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
26 }
27
28 @keyframes pulse-large {
29 0%, 100% { width: 10px; height: 10px; margin: -5px; }
30 50% { width: 4px; height: 4px; margin: -2px; }
31 }
32
33 @keyframes pulse-small {
34 0%, 100% { width: 4px; height: 4px; margin: -2px; }
35 50% { width: 10px; height: 10px; margin: -5px; }
36 }
37</style>
38</head>
39<body>
40<div class="container" id="c"></div>
41
42<script>
43 const container = document.getElementById('c');
44 const count = 8;
45 const radius = 40;
46 const duration = 2000; // ms per full rotation
47 const pulseDuration = 1000;
48
49 for (let i = 0; i < count; i++) {
50 const dot = document.createElement('div');
51 dot.className = 'dot';
52
53 const angle = (i / count) * 360;
54 const isLarge = i % 2 === 0;
55 const size = isLarge ? 10 : 4;
56
57 dot.style.width = size + 'px';
58 dot.style.height = size + 'px';
59 dot.style.margin = (-size/2) + 'px';
60
61 // Orbit animation
62 dot.style.animation = `
63 orbit ${duration}ms linear infinite,
64 ${isLarge ? 'pulse-large' : 'pulse-small'} ${pulseDuration}ms ease-in-out infinite
65 `;
66 dot.style.animationDelay = `${(i / count) * -duration}ms, ${(i / count) * -pulseDuration}ms`;
67
68 container.appendChild(dot);
69 }
70</script>
71</body>
72</html>