animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Animated Concepts #3

model output

GPT-5.4

Animated Concepts #3

A 0.87T 0.29
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>Minimal Rotating Dash</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --dash:#ff7f79;
11    --w:76px;
12    --h:6px;
13    --dur:1.6s;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  body{
25    display:grid;
26    place-items:center;
27  }
28
29  .stage{
30    position:relative;
31    width:100vw;
32    height:100vh;
33  }
34
35  .dash{
36    position:absolute;
37    left:50%;
38    top:50%;
39    width:var(--w);
40    height:var(--h);
41    margin-left:calc(var(--w) / -2);
42    margin-top:calc(var(--h) / -2);
43    border-radius:999px;
44    background:linear-gradient(90deg,#ff8b84 0%, #ff7f79 55%, #ff746f 100%);
45    box-shadow:0 0 0.5px rgba(255,140,130,.9);
46    transform-origin:50% 50%;
47    animation: dashSpin var(--dur) linear infinite;
48    will-change:transform;
49  }
50
51  @keyframes dashSpin{
52    0%   { transform:rotate(22deg) scaleX(1); }
53    12.5%{ transform:rotate(72deg) scaleX(1); }
54    25%  { transform:rotate(108deg) scaleX(1); }
55    37.5%{ transform:rotate(178deg) scaleX(1); }
56    50%  { transform:rotate(202deg) scaleX(.14); }
57    62.5%{ transform:rotate(180deg) scaleX(1); }
58    75%  { transform:rotate(158deg) scaleX(1); }
59    87.5%{ transform:rotate(108deg) scaleX(1); }
60    100% { transform:rotate(22deg) scaleX(1); }
61  }
62</style>
63</head>
64<body>
65  <div class="stage">
66    <div class="dash"></div>
67  </div>
68</body>
69</html>