Radar Animation using CSS

This code implements a radar animation using HTML and CSS. The radar is created using a circular element with a lime green border and a rotating background. The animation includes a moving dot and a scaling effect. It utilizes CSS animations and keyframes to achieve the desired visual effects. The radar animation can be used to add an engaging and dynamic element to websites or applications.

How to Create Radar Animation Using CSS

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create a div element with a class name “radar” and place it where you want to display radar animation.

<div class="radar"></div>

3. Use the following CSS code to style and animate the radar interface.

.radar{
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  --border-size: 3px;
  --border-angle: 0turn;
  --grid-bg: radial-gradient(
    transparent 69%,
    limegreen 69%,
    limegreen 70%,
    transparent 70%
  );
  --line-bg: transparent 50%, limegreen 50%, transparent 50.5%;
  background-image: conic-gradient(from var(--border-angle), transparent 10%, #0d0a 99%, limegreen 99.5%), linear-gradient(0deg, var(--line-bg)), linear-gradient(45deg, var(--line-bg)), linear-gradient(90deg, var(--line-bg)), linear-gradient(135deg, var(--line-bg)), var(--grid-bg), var(--grid-bg), var(--grid-bg);
  background-size: cover, cover, cover, cover, cover, 25% 25%, 50% 50%, 75% 75%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: solid 0.5vmin limegreen;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
  position: relative;
  filter: drop-shadow(0px 0px 10vmin black) blur(0.5px) contrast(200%);
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.radar::after {
  content: "";
  display: block;
  position: absolute;
  top: 30%;
  left: 30%;
  width: 2vmin;
  height: 2vmin;
  background: limegreen;
  border-radius: 50%;
  -webkit-animation: move 18s steps(6) infinite;
          animation: move 18s steps(6) infinite;
}
@-webkit-keyframes move {
  33% {
    transform: translate(25vmin, 10vmin);
  }
  66% {
    transform: translate(15vmin, 30vmin);
  }
  100% {
    transform: translate(0vmin, 0vmin);
  }
}
@keyframes move {
  33% {
    transform: translate(25vmin, 10vmin);
  }
  66% {
    transform: translate(15vmin, 30vmin);
  }
  100% {
    transform: translate(0vmin, 0vmin);
  }
}
.radar::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: solid 1vmin limegreen;
  -webkit-animation: scale 3s linear infinite;
          animation: scale 3s linear infinite;
}
@-webkit-keyframes scale {
  from {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  51%, 100% {
    opacity: 0;
  }
}
@keyframes scale {
  from {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  51%, 100% {
    opacity: 0;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

To customize the radar animation, you can modify various aspects of the CSS code. Here are some suggestions:

1. Size: Adjust the size of the radar by modifying the width and height properties in the .radar CSS class. You can use different units such as pixels (px), percentages (%), or viewport units (vw/vh) to specify the dimensions.
2. Colors: Change the colors used in the animation by modifying the values in the CSS code. For example, you can update the background property in the .radar class to use different background colors or gradients.
3. Border: Modify the border of the radar by adjusting the border property in the .radar class. You can change the color, thickness, and style of the border to fit your preferences.
4. Animation duration: Adjust the duration of the animations by modifying the 3s value in the animation properties for the .radar class and its keyframes. You can increase or decrease the duration to make the animation faster or slower.
5. Animation keyframes: Customize the movement of the dot and scaling effect by modifying the keyframes in the @keyframes move and @keyframes scale sections of the CSS code. You can change the percentage values and transform properties to create different motion patterns.

That’s all! hopefully, you have successfully created radar animation using CSS. If you have any questions or suggestions, feel free to comment below.