← back to Animated Concepts #3compare with ground truth →
model output
GPT-5.4
Animated Concepts #3
A 0.87T 0.29
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>