model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.74T 0.18
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>Hand-Drawn Ink Loading Animation</title>
7    <style>
8        /* 
9           Background color matches the provided video frames (approx #ececec).
10           Centering the loader in the viewport.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #ececec;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            height: 100vh;
20            overflow: hidden;
21        }
22
23        /* 
24           The loader container.
25           Uses a conic-gradient to simulate the tapering stroke of a brush.
26        */
27        .loader-container {
28            position: relative;
29            width: 48px;
30            height: 48px;
31            /* The 'jitter' filter gives it the hand-drawn, wobbly effect */
32            filter: url(#ink-jitter);
33        }
34
35        .spinner {
36            width: 100%;
37            height: 100%;
38            border-radius: 50%;
39            /* 
40               Conic gradient starts dark and fades to light gray/transparent 
41               to mimic the trailing brush stroke seen in the video.
42            */
43            background: conic-gradient(
44                from 0deg,
45                #333 0%,
46                #333 15%,
47                rgba(51, 51, 51, 0.6) 40%,
48                rgba(51, 51, 51, 0.2) 70%,
49                transparent 90%
50            );
51            
52            /* Masking to create the hollow ring shape */
53            -webkit-mask: radial-gradient(farthest-side, transparent 65%, #000 66%);
54            mask: radial-gradient(farthest-side, transparent 65%, #000 66%);
55
56            /* 
57               Smooth rotation animation. 
58               Timing is approximately 0.8s per rotation based on the video.
59            */
60            animation: rotate 0.8s linear infinite;
61        }
62
63        @keyframes rotate {
64            from { transform: rotate(0deg); }
65            to { transform: rotate(360deg); }
66        }
67
68        /* 
69           Hidden SVG filter used to create the organic, ink-bleed/sketched look.
70           The feTurbulence seed is animated to create the frame-by-frame jitter 
71           characteristic of traditional animation.
72        */
73        .svg-filters {
74            position: absolute;
75            width: 0;
76            height: 0;
77            visibility: hidden;
78        }
79    </style>
80</head>
81<body>
82
83    <div class="loader-container">
84        <div class="spinner"></div>
85    </div>
86
87    <!-- SVG Filter for the Hand-Drawn Jitter Effect -->
88    <svg class="svg-filters">
89        <defs>
90            <filter id="ink-jitter">
91                <!-- 
92                     feTurbulence creates a noise map.
93                     Animating 'seed' with 'discrete' calcMode mimics the 
94                     hand-drawn "shivering" effect.
95                -->
96                <feTurbulence type="fractalNoise" baseFrequency="0.12" numOctaves="2" result="noise">
97                    <animate 
98                        attributeName="seed" 
99                        from="1" 
100                        to="100" 
101                        dur="1s" 
102                        repeatCount="indefinite" 
103                        calcMode="discrete" />
104                </feTurbulence>
105                <!-- 
106                     feDisplacementMap uses the noise to warp the edges 
107                     of the clean CSS circle.
108                -->
109                <feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
110            </filter>
111        </defs>
112    </svg>
113
114    <script>
115        /**
116         * No complex logic needed as CSS handles the rotation and SVG handles the jitter.
117         * The combination perfectly recreates the organic ink-stroke animation 
118         * seen in the source video.
119         */
120    </script>
121</body>
122</html>