animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Simple Spinner

model output

Claude Sonnet 4.6

Simple Spinner

A 0.87T 0.33
compare with ground truth →
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>