model output
Gemini 3 Flash Preview

Animated Radio Waves
A 0.59T 0.12
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>Signal Pulse Animation</title>
7    <style>
8        :root {
9            --bg-color: #ffffff;
10            --main-color: #000000;
11            --fade-color: #cccccc;
12            --anim-speed: 1.2s;
13        }
14
15        body {
16            margin: 0;
17            padding: 0;
18            display: flex;
19            justify-content: center;
20            align-items: center;
21            height: 100vh;
22            background-color: var(--bg-color);
23            overflow: hidden;
24        }
25
26        .container {
27            position: relative;
28            width: 300px;
29            height: 200px;
30            display: flex;
31            align-items: center;
32            justify-content: flex-end;
33            padding-right: 20px;
34        }
35
36        /* The Dot on the right */
37        .dot {
38            width: 14px;
39            height: 14px;
40            background-color: var(--main-color);
41            border-radius: 50%;
42            position: relative;
43            z-index: 10;
44        }
45
46        /* Common styles for all arcs */
47        .arc {
48            position: absolute;
49            border: 3.5px solid transparent;
50            border-left-color: var(--main-color);
51            border-radius: 50%;
52            /* Centers the arcs on the dot */
53            right: 27px; 
54            opacity: 0.1;
55            animation: ripple var(--anim-speed) ease-in-out infinite;
56        }
57
58        /* Sizes for each arc level */
59        .arc-1 { width: 30px; height: 30px; animation-delay: 0.1s; }
60        .arc-2 { width: 70px; height: 70px; animation-delay: 0.2s; }
61        .arc-3 { width: 110px; height: 110px; animation-delay: 0.3s; }
62        .arc-4 { width: 150px; height: 150px; animation-delay: 0.4s; }
63        .arc-5 { width: 190px; height: 190px; animation-delay: 0.5s; }
64
65        @keyframes ripple {
66            0% {
67                opacity: 0.1;
68                transform: scale(0.95);
69                border-left-color: var(--fade-color);
70            }
71            30% {
72                opacity: 1;
73                transform: scale(1);
74                border-left-color: var(--main-color);
75            }
76            60%, 100% {
77                opacity: 0.2;
78                transform: scale(1);
79                border-left-color: var(--fade-color);
80            }
81        }
82
83        /* Centering adjustment for the pseudo-concentric look */
84        .arc-1 { right: 18px; }
85        .arc-2 { right: -2px; }
86        .arc-3 { right: -22px; }
87        .arc-4 { right: -42px; }
88        .arc-5 { right: -62px; }
89
90    </style>
91</head>
92<body>
93
94    <div class="container">
95        <!-- Arcs radiating outwards to the left -->
96        <div class="arc arc-5"></div>
97        <div class="arc arc-4"></div>
98        <div class="arc arc-3"></div>
99        <div class="arc arc-2"></div>
100        <div class="arc arc-1"></div>
101        
102        <!-- Center Dot -->
103        <div class="dot"></div>
104    </div>
105
106    <script>
107        /**
108         * Recreating the signal broadcast animation.
109         * The dot serves as the anchor point on the right.
110         * Arcs are circular divs with only the left border visible.
111         * They are positioned relative to the dot's right edge to create a concentric look.
112         * The animation staggers the opacity and color of each arc to simulate a wave traveling left.
113         */
114    </script>
115</body>
116</html>