model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.79T 0.35
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>Wobbling Dashed Line Animation</title>
7    <style>
8        /* 
9           Styling the background to match the light gray color 
10           observed in the provided video frames (#ededed).
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            display: flex;
16            justify-content: center;
17            align-items: center;
18            height: 100vh;
19            background-color: #ededed;
20            overflow: hidden;
21        }
22
23        /* 
24           The container for the SVG. 
25           We use a small size to match the scale of the original animation.
26        */
27        .container {
28            width: 100%;
29            display: flex;
30            justify-content: center;
31            /* Positioned slightly towards the top as seen in the frames */
32            margin-top: -35vh; 
33        }
34
35        svg {
36            width: 80px;
37            height: 60px;
38        }
39
40        /* 
41           The path recreates the dashed black line.
42           - stroke-dasharray: creates the dotted/dashed effect.
43           - stroke-linecap: 'round' ensures the dashes look clean.
44           - animation: toggles the curve every 1 second (0.5s down, 0.5s up).
45        */
46        .wobble-line {
47            fill: none;
48            stroke: #000000;
49            stroke-width: 1.5;
50            stroke-dasharray: 1.5, 2.5;
51            stroke-linecap: round;
52            transition: d 0.5s ease-in-out;
53            animation: move-wave 1s ease-in-out infinite;
54        }
55
56        /* 
57           Keyframes for the "d" attribute animation.
58           0% / 100%: Arched upward (as seen at 01.000 and 02.000)
59           50%: Sagging downward (as seen at 00.500 and 01.500)
60           
61           Note: CSS animation of the 'd' property is supported in modern 
62           browsers (Chrome, Edge, Safari).
63        */
64        @keyframes move-wave {
65            0%, 100% {
66                d: path("M 10 30 Q 40 22 70 30");
67            }
68            50% {
69                d: path("M 10 30 Q 40 38 70 30");
70            }
71        }
72    </style>
73</head>
74<body>
75
76    <div class="container">
77        <svg viewBox="0 0 80 60" xmlns="http://www.w3.org/2000/svg">
78            <!-- 
79                Quadratic Bezier Curve: 
80                M (Move to start x,y) 
81                Q (Control Point x,y, End Point x,y)
82            -->
83            <path class="wobble-line" d="M 10 30 Q 40 22 70 30" />
84        </svg>
85    </div>
86
87    <script>
88        /**
89         * The animation is handled entirely via CSS keyframes for performance.
90         * The timing (1s cycle) matches the 0.5s intervals observed in the video:
91         * 0.0s: Arched (Start)
92         * 0.5s: Sagging
93         * 1.0s: Arched
94         * 1.5s: Sagging
95         * 2.0s: Arched
96         */
97    </script>
98</body>
99</html>