Geofence Ring

<div class="nuda-ml2-geofence">
  <div class="nuda-ml2-geofence__field" aria-hidden="true">
    <span class="nuda-ml2-geofence__boundary"></span>
    <span class="nuda-ml2-geofence__ring"></span>
    <span class="nuda-ml2-geofence__ring nuda-ml2-geofence__ring--delay"></span>
    <span class="nuda-ml2-geofence__pin"></span>
  </div>
  <p class="nuda-ml2-geofence__text">Geofence active — <strong>500 m</strong> around Home</p>
</div>

.nuda-ml2-geofence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 220px;
  max-width: 100%;
}

.nuda-ml2-geofence__field {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-ml2-geofence__boundary {
  position: absolute;
  inset: 8px;
  border: 1.5px dashed rgba(228,255,84,.35);
  border-radius: 50%;
}

.nuda-ml2-geofence__ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #e4ff54;
  opacity: 0;
  animation: _nuda-ml2geofence-pulse 2.8s ease-out infinite;
}

.nuda-ml2-geofence__ring--delay {
  animation-delay: 1.4s;
}

.nuda-ml2-geofence__pin {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 0 4px rgba(228,255,84,.2),0 0 10px rgba(228,255,84,.6);
  z-index: 1;
}

.nuda-ml2-geofence__text {
  margin: 0;
  font-size: 12px;
  color: #cfcfcf;
  text-align: center;
}

.nuda-ml2-geofence__text strong {
  color: #fafafa;
  font-weight: 700;
}

@keyframes _nuda-ml2geofence-pulse {
  0% {
    transform: scale(.3);
    opacity: .8;
  }
  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ml2-geofence__ring {
    animation: none !important;
    opacity: 0;
  }
}