← back to Simple Spinnercompare with ground truth →
model output
Claude Sonnet 4.6
Simple Spinner
A 0.87T 0.33
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5 * { margin: 0; padding: 0; box-sizing: border-box; }
6 body {
7 background: #009900;
8 width: 100vw;
9 height: 100vh;
10 display: flex;
11 align-items: center;
12 justify-content: center;
13 overflow: hidden;
14 }
15 .container {
16 position: relative;
17 width: 50px;
18 height: 50px;
19 }
20 .square {
21 position: absolute;
22 top: 50%;
23 left: 50%;
24 transform-origin: center center;
25 }
26 .blue {
27 width: 46px;
28 height: 46px;
29 margin-left: -23px;
30 margin-top: -23px;
31 border: 2px solid #3399cc;
32 animation: rotateCW 4s linear infinite;
33 }
34 .yellow {
35 width: 32px;
36 height: 32px;
37 margin-left: -16px;
38 margin-top: -16px;
39 border: 2px solid #e6a817;
40 animation: rotateCCW 4s linear infinite;
41 }
42 @keyframes rotateCW {
43 from { transform: rotate(0deg); }
44 to { transform: rotate(360deg); }
45 }
46 @keyframes rotateCCW {
47 from { transform: rotate(0deg); }
48 to { transform: rotate(-360deg); }
49 }
50</style>
51</head>
52<body>
53 <div class="container">
54 <div class="square blue"></div>
55 <div class="square yellow"></div>
56 </div>
57</body>
58</html>