model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.94T 0.41
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>Hourglass Logo Animation</title>
7    <style>
8        /* 
9           Styling to match the background color and center the logo 
10           as seen in the provided animation video.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            display: flex;
16            justify-content: center;
17            align-items: flex-start; /* Positioned towards the top */
18            background-color: #e84d3e; /* Vibrant red-orange background */
19            height: 100vh;
20            overflow: hidden;
21            padding-top: 50px; /* Vertical offset matching video placement */
22        }
23
24        /* 
25           The container controls the size of the logo and the rotation animation.
26           Analysis of the video timing:
27           - 0.0s: Vertical (0deg)
28           - 1.0s: Horizontal (90deg)
29           - 1.5s: Vertical (180deg)
30           
31           This indicates a 1.5s cycle for a half-turn with a speed increase 
32           in the latter third of the clip.
33        */
34        .logo-container {
35            width: 72px; 
36            height: 72px;
37            /* Using a linear loop with specific keyframes to match video timestamps */
38            animation: hourglass-rotation 1.5s linear infinite;
39        }
40
41        @keyframes hourglass-rotation {
42            0% {
43                transform: rotate(0deg);
44            }
45            /* At 1.0s mark (66.6% of the 1.5s loop), the logo reaches 90 degrees */
46            66.67% {
47                transform: rotate(90deg);
48            }
49            /* At 1.5s mark (100% of the loop), the logo completes 180 degrees */
50            100% {
51                transform: rotate(180deg);
52            }
53        }
54
55        /* SVG styling for crisp rendering */
56        svg {
57            display: block;
58            width: 100%;
59            height: 100%;
60        }
61
62        .circle-outline {
63            fill: none;
64            stroke: white;
65            stroke-width: 4.5; /* Bold white circle border */
66        }
67
68        .hourglass-fill {
69            fill: white;
70        }
71    </style>
72</head>
73<body>
74
75    <div class="logo-container">
76        <!-- 
77            SVG construction of the hourglass logo:
78            Consists of an outer ring and two triangles meeting at the center point.
79        -->
80        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
81            <!-- Outer Circle -->
82            <circle class="circle-outline" cx="50" cy="50" r="44" />
83            
84            <!-- Top Triangle of the hourglass -->
85            <polygon class="hourglass-fill" points="50,50 24,24 76,24" />
86            
87            <!-- Bottom Triangle of the hourglass -->
88            <polygon class="hourglass-fill" points="50,50 24,76 76,76" />
89        </svg>
90    </div>
91
92</body>
93</html>