Radio waves

Jul 2025

htmlcss

A pure CSS animation of radio waves emanating from a central point. The effect uses CSS outline properties with animations to create expanding wave rings.

How It Works

The animation uses three elements:

Center dot - The .circle element that creates the pulsing center point
Wave rings - Two .wave elements that expand outward from the center
Staggered animation - The second wave starts 1 second after the first for continuous waves

The key technique is using outline-offset combined with outline-color transparency changes to create the expanding and fading effect.

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  position: relative;
}

.circle {
  background: #fafafa;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  animation: 1s infinite wave;
  outline-style: solid;
  outline-color: #fafafa32;
}

.wave1, .wave2 {
  outline-width: 1px;
  outline-color: #fafafa;
  outline-style: solid;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  border-radius: 100%;
  animation: 2s infinite wave1 linear;
}

.wave2 {
  animation-delay: 1s;
}

@keyframes wave {
  from {
    outline-width: 0px;
    outline-color: #fafafaff;
  }
  to {
    outline-width: 15px;
    outline-color: #fafafa00;
  }
}

@keyframes wave1 {
  0% {
    outline-offset: 0px;
    outline-color: #fafafaaa
  }
  50% {
    outline-color: #fafafa32;
  }
  to {
    outline-offset: 60px;
    outline-color: #fafafa00;
  }
}

HTML

<div class="container">
  <div class="circle"></div>
  <div class="wave1"></div>
  <div class="wave2"></div>
</div>

Key Techniques

Outline animations - Using outline-offset to expand rings outward
Hex color alpha - Colors like #fafafa00 and #fafafaaa use the last two digits for transparency
Animation delay - wave2 has a 1 second delay for continuous wave emission
Absolute positioning - Waves are positioned on top of each other at the center