animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Loaders (WIP)

model output

Claude Sonnet 4.6

Loaders (WIP)

A 0.88T 0.31
compare with ground truth →
1Looking at the frames, I can see the Black Widow hourglass logo spinning/rotating inside a circle on a red background. The animation shows the hourglass shape rotating through different orientations - starting vertical (hourglass), rotating to show triangles pointing sideways (bowtie/butterfly shape), completing a full rotation cycle.
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6<meta charset="UTF-8">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<title>Black Widow Logo Animation</title>
9<style>
10  * { margin: 0; padding: 0; box-sizing: border-box; }
11  
12  body {
13    background-color: #e8473a;
14    width: 100vw;
15    height: 100vh;
16    display: flex;
17    align-items: flex-start;
18    justify-content: center;
19    padding-top: 60px;
20  }
21
22  .logo-container {
23    width: 80px;
24    height: 80px;
25    position: relative;
26  }
27
28  .circle {
29    width: 80px;
30    height: 80px;
31    border: 3px solid white;
32    border-radius: 50%;
33    position: absolute;
34    top: 0;
35    left: 0;
36  }
37
38  .hourglass-wrapper {
39    position: absolute;
40    top: 50%;
41    left: 50%;
42    transform: translate(-50%, -50%);
43    width: 44px;
44    height: 44px;
45    animation: spinHourglass 1.2s linear infinite;
46  }
47
48  .hourglass-svg {
49    width: 100%;
50    height: 100%;
51  }
52
53  @keyframes spinHourglass {
54    0%   { transform: translate(-50%, -50%) rotate(0deg); }
55    100% { transform: translate(-50%, -50%) rotate(360deg); }
56  }
57</style>
58</head>
59<body>
60
61<div class="logo-container">
62  <div class="circle"></div>
63  <div class="hourglass-wrapper">
64    <svg class="hourglass-svg" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
65      <!-- Top triangle pointing down -->
66      <polygon points="22,22 4,4 40,4" fill="white"/>
67      <!-- Bottom triangle pointing up -->
68      <polygon points="22,22 4,40 40,40" fill="white"/>
69    </svg>
70  </div>
71</div>
72
73</body>
74</html>