animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to CirclePath 1 v4 Loading Animation

model output

Claude Sonnet 4.6

CirclePath 1 v4 Loading Animation

A 0.78T 0.24
compare with ground truth →
1Looking at the frames, I can see a loading spinner animation where dots orbit around a center point. The dots appear one by one, forming a circular pattern, with each dot having varying brightness (the newest dot is brightest, older ones fade to darker). This is a classic "spinner" with trailing dots that rotate.
2
3Key observations:
4- 6 dots arranged in a circle
5- They rotate continuously
6- Each dot has a different opacity/brightness based on its position in the trail
7- The dots fade from light gray to dark gray as they trail behind
8
9<!DOCTYPE html>
10<html>
11<head>
12<style>
13  * { margin: 0; padding: 0; box-sizing: border-box; }
14  body {
15    background: #000;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21  }
22  .spinner {
23    position: relative;
24    width: 60px;
25    height: 60px;
26    animation: rotate 1s linear infinite;
27  }
28  .dot {
29    position: absolute;
30    width: 18px;
31    height: 18px;
32    border-radius: 50%;
33    background: #999;
34    top: 50%;
35    left: 50%;
36    margin-top: -9px;
37    margin-left: -9px;
38  }
39  @keyframes rotate {
40    from { transform: rotate(0deg); }
41    to { transform: rotate(360deg); }
42  }
43  .dot:nth-child(1) { transform: translate(26px, 0px);    opacity: 1.0; }
44  .dot:nth-child(2) { transform: translate(13px, 22px);   opacity: 0.85; }
45  .dot:nth-child(3) { transform: translate(-13px, 22px);  opacity: 0.7; }
46  .dot:nth-child(4) { transform: translate(-26px, 0px);   opacity: 0.55; }
47  .dot:nth-child(5) { transform: translate(-13px, -22px); opacity: 0.35; }
48  .dot:nth-child(6) { transform: translate(13px, -22px);  opacity: 0.2; }
49</style>
50</head>
51<body>
52  <div class="spinner">
53    <div class="dot"></div>
54    <div class="dot"></div>
55    <div class="dot"></div>
56    <div class="dot"></div>
57    <div class="dot"></div>
58    <div class="dot"></div>
59  </div>
60</body>
61</html>