← back to Wavy Loading Animationscompare with ground truth →
model output
Claude Sonnet 4.6
Wavy Loading Animations
A 0.59T 0.27
1Looking at the frames, I can see a shape that alternates between a triangle (pointing right) and a flattened oval/ellipse shape, positioned near the top-center of the screen. The shape appears to be rotating/flipping - it's a 3D rotation effect where a triangle rotates around its vertical axis, creating the illusion of flipping between a triangle and a flat disc shape.
2
3The shape is gray (~#aaa), positioned around x:500, y:100 in a ~1024x768 viewport. It cycles through: triangle → flat oval → triangle (pointing left) → flat oval → triangle, suggesting a continuous Y-axis rotation.
4
5<!DOCTYPE html>
6<html lang="en">
7<head>
8<meta charset="UTF-8">
9<meta name="viewport" content="width=device-width, initial-scale=1.0">
10<title>Rotating Triangle Animation</title>
11<style>
12 * { margin: 0; padding: 0; box-sizing: border-box; }
13
14 body {
15 background-color: #ebebeb;
16 width: 100vw;
17 height: 100vh;
18 overflow: hidden;
19 display: flex;
20 justify-content: center;
21 align-items: flex-start;
22 }
23
24 .scene {
25 position: absolute;
26 top: 80px;
27 left: 50%;
28 transform: translateX(-50%);
29 width: 60px;
30 height: 50px;
31 perspective: 400px;
32 }
33
34 .triangle-wrapper {
35 width: 100%;
36 height: 100%;
37 animation: flipY 1.2s linear infinite;
38 transform-style: preserve-3d;
39 position: relative;
40 }
41
42 .triangle {
43 position: absolute;
44 width: 0;
45 height: 0;
46 top: 50%;
47 left: 50%;
48 transform: translate(-50%, -50%);
49 border-top: 25px solid transparent;
50 border-bottom: 25px solid transparent;
51 border-left: 45px solid #aaa;
52 }
53
54 @keyframes flipY {
55 0% { transform: rotateY(0deg); }
56 100% { transform: rotateY(360deg); }
57 }
58</style>
59</head>
60<body>
61
62<div class="scene">
63 <div class="triangle-wrapper">
64 <div class="triangle"></div>
65 </div>
66</div>
67
68<script>
69 // The animation is purely CSS-driven
70 // The triangle rotates around Y axis continuously
71 // giving the appearance of flipping between pointing right,
72 // becoming flat (oval), pointing left, flat again, repeat
73</script>
74
75</body>
76</html>