Sonar ping dot with CSS

Here is a method to do a sonar style pinging dot with CSS animations. The outcome will look like this

Firstly you will need an SVG dot you can create one with this code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
    <circle r="30" cx="32" cy="32" style="fill:#A27FEF;stroke-width:0" />
</svg>

Now for two HTML elements. One is a stationary dot (marker) and the other an overlay (ping) that will animate scale and oppacity giving the ping effect.

HTML:

<div class="marker"></div>
<div class="ping"></div>

The CSS most importantly has the animations to which you can tinker with

CSS:

body {
  background-color: #28140c;
}

.marker {
  width: 8%;
  height: 8%;
  background-image: url(dot1.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

.ping {
  width: 8%;
  height: 8%;
  background-image: url(dot1.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  -webkit-animation: pulse 2s ease-out;
  -moz-animation: pulse 2s ease-out;
  animation: pulse 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1.1);
    opacity: 0.9;
  }
  10% {
    -moz-transform: scale(1.2);
    opacity: 0.8;
  }
  20% {
    -moz-transform: scale(1.3);
    opacity: 0.7;
  }
  30% {
    -moz-transform: scale(1.4);
    opacity: 0.6;
  }
  40% {
    -moz-transform: scale(1.5);
    opacity: 0.5;
  }
  50% {
    -moz-transform: scale(1.6);
    opacity: 0.4;
  }
  60% {
    -moz-transform: scale(1.7);
    opacity: 0.3;
  }
  70% {
    -moz-transform: scale(1.8);
    opacity: 0.2;
  }
  80% {
    -moz-transform: scale(1.9);
    opacity: 0.1;
  }
  90% {
    -moz-transform: scale(2);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    -moz-transform: scale(1.1);
    opacity: 0.9;
  }
  10% {
    -moz-transform: scale(1.2);
    opacity: 0.8;
  }
  20% {
    -moz-transform: scale(1.3);
    opacity: 0.7;
  }
  30% {
    -moz-transform: scale(1.4);
    opacity: 0.6;
  }
  40% {
    -moz-transform: scale(1.5);
    opacity: 0.5;
  }
  50% {
    -moz-transform: scale(1.6);
    opacity: 0.4;
  }
  60% {
    -moz-transform: scale(1.7);
    opacity: 0.3;
  }
  70% {
    -moz-transform: scale(1.8);
    opacity: 0.2;
  }
  80% {
    -moz-transform: scale(1.9);
    opacity: 0.1;
  }
  90% {
    -moz-transform: scale(2);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(2);
    opacity: 0;
  }
}

You can view a live example at CodePen here.