animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Nice spinny stuff

model output

Claude Sonnet 4.6

Nice spinny stuff

A 0.93T 0.31
compare with ground truth →
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>