Live Pulse Radar Beacon

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="beacon-wrap">
  <div class="radar-box">
    <div class="pulse-ring r1"></div>
    <div class="pulse-ring r2"></div>
    <div class="pulse-ring r3"></div>
    <div class="center-orb"></div>
  </div>
  <div class="beacon-info">
    <div class="b-title">All Systems Operational</div>
    <div class="b-meta">Global CDN · 24ms Average Latency · 99.99%</div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a live system status pulse radar beacon in HTML and CSS.

Requirements:
- Compact pill-shaped dark container (#0f172a, rounded 999px, subtle border).
- Concentric circular ripple rings that expand outward continuously from a center green orb using CSS keyframe animations with staggered animation-delay.
- Status headline ("All Systems Operational") and server telemetry metrics in monospace.
- Zero JavaScript, lightweight and smooth.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Center an emerald green orb inside a fixed-size container.

2. 2

   Add 3 pulse rings using absolute positioning and border-radius 50%.

3. 3

   Animate transform: scale() from 0.4 to 2.2 and opacity from 0.9 to 0.

4. 4

   Stagger animation-delay (0s, 0.8s, 1.6s) for continuous rhythmic propagation.

Customisation tips

• Use cubic-bezier(0.2, 0, 0.2, 1) to give the pulse realistic initial acceleration.
• Respect prefers-reduced-motion by pausing or stopping pulse animations.

More components