animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to SVG Loading icons

model output

Claude Sonnet 4.6

SVG Loading icons

A 0.85T 0.22
compare with ground truth →
1Looking at the frames, I can see three small orange vertical bars near the top-center of a dark background. The bars animate their heights independently - each bar bounces up and down at different phases, creating a loading/equalizer effect.
2
3Key observations:
4- Dark background color: ~#2e3b3e or similar dark teal-gray
5- Three orange bars (#e8621a or similar orange)
6- Bars are small rectangles, about 3px wide, varying heights (4-8px)
7- They animate like an audio equalizer/loading indicator
8- Each bar has a different phase/timing
9- Located near top-center of the viewport
10
11<!DOCTYPE html>
12<html lang="en">
13<head>
14<meta charset="UTF-8">
15<meta name="viewport" content="width=device-width, initial-scale=1.0">
16<title>Loading Animation</title>
17<style>
18  * { margin: 0; padding: 0; box-sizing: border-box; }
19  
20  body {
21    background-color: #323d3f;
22    width: 100vw;
23    height: 100vh;
24    display: flex;
25    justify-content: center;
26    align-items: flex-start;
27    padding-top: 30px;
28  }
29
30  .loader {
31    display: flex;
32    align-items: flex-end;
33    gap: 2px;
34    height: 12px;
35  }
36
37  .bar {
38    width: 3px;
39    background-color: #e8621a;
40    border-radius: 1px;
41    animation: bounce 0.8s ease-in-out infinite;
42  }
43
44  .bar:nth-child(1) {
45    animation-delay: 0s;
46  }
47
48  .bar:nth-child(2) {
49    animation-delay: 0.2s;
50  }
51
52  .bar:nth-child(3) {
53    animation-delay: 0.4s;
54  }
55
56  @keyframes bounce {
57    0%, 100% {
58      height: 4px;
59    }
60    50% {
61      height: 10px;
62    }
63  }
64</style>
65</head>
66<body>
67  <div class="loader">
68    <div class="bar"></div>
69    <div class="bar"></div>
70    <div class="bar"></div>
71  </div>
72</body>
73</html>