model output
Gemini 3 Flash Preview

Worm cycle
A 0.72T 0.24
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>Rounded Arc Animation</title>
7    <style>
8        /* Setup background and centering */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background-color: #f1f1e8; /* Matches the cream/off-white background */
17            overflow: hidden;
18        }
19
20        /* Container for the loader to handle continuous rotation */
21        .loader {
22            width: 100px;
23            height: 100px;
24            position: relative;
25            animation: rotate-container 2s linear infinite;
26        }
27
28        svg {
29            width: 100%;
30            height: 100%;
31            display: block;
32        }
33
34        /* The animated arc */
35        circle {
36            fill: none;
37            stroke-width: 10; /* Thick stroke as seen in the video */
38            stroke-linecap: round; /* Creates the rounded ends of the arc */
39            stroke-dasharray: 1, 200;
40            stroke-dashoffset: 0;
41            
42            /* Center coordinates relative to viewBox 100 100 */
43            cx: 50;
44            cy: 50;
45            r: 35;
46            
47            transform-origin: 50% 50%;
48            
49            /* Combined animations:
50               - dash: Handles the stretching and shrinking of the arc
51               - color-shift: Cycles through red, purple, and blue
52               - wiggle: Adds a subtle organic movement
53            */
54            animation: 
55                dash 1.5s ease-in-out infinite,
56                color-shift 4.5s ease-in-out infinite,
57                wiggle 3s ease-in-out infinite;
58        }
59
60        /* Constant 360-degree rotation of the entire unit */
61        @keyframes rotate-container {
62            0% {
63                transform: rotate(0deg);
64            }
65            100% {
66                transform: rotate(360deg);
67            }
68        }
69
70        /* 
71           The "Snake" effect:
72           - 0%: Starting point, very short arc.
73           - 50%: Arc stretches to nearly half the circle.
74           - 100%: The tail "catches up" to the head by shifting the offset.
75        */
76        @keyframes dash {
77            0% {
78                stroke-dasharray: 1, 200;
79                stroke-dashoffset: 0;
80            }
81            50% {
82                stroke-dasharray: 100, 200;
83                stroke-dashoffset: -20;
84            }
85            100% {
86                stroke-dasharray: 100, 200;
87                stroke-dashoffset: -125;
88            }
89        }
90
91        /* Color transitions matched to the video frames */
92        @keyframes color-shift {
93            0%, 100% {
94                stroke: #f16d7a; /* Reddish / Coral */
95            }
96            33% {
97                stroke: #9b59b6; /* Purple / Violet */
98            }
99            66% {
100                stroke: #5c6bc0; /* Indigo / Blue */
101            }
102        }
103
104        /* 
105           Subtle scaling/wiggle to mimic the non-perfectly circular, 
106           almost "liquid" movement seen in the video.
107        */
108        @keyframes wiggle {
109            0%, 100% {
110                transform: scale(1) rotate(0deg);
111            }
112            50% {
113                transform: scale(1.08) rotate(5deg);
114            }
115        }
116    </style>
117</head>
118<body>
119
120    <!-- Simple SVG implementation -->
121    <div class="loader">
122        <svg viewBox="0 0 100 100">
123            <circle cx="50" cy="50" r="35" />
124        </svg>
125    </div>
126
127</body>
128</html>