<svg class="ripple" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" fill="none" stroke="#3498db" stroke-width="2" />
    <circle cx="50" cy="50" r="45" fill="none" stroke="#3498db" stroke-width="2" />
    <circle cx="50" cy="50" r="45" fill="none" stroke="#3498db" stroke-width="2" />
  </svg>
  <h3>Ripple Effect</h3>

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

svg {
  width: 100px;
  height: 100px;
}
.ripple circle {
  transform-origin: center;
  animation: ripple 2s infinite cubic-bezier(0.23, 1, 0.32, 1);
}

.ripple circle:nth-child(2) {
  animation-delay: 0.5s;
}
.ripple circle:nth-child(3) {
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}


h3 {
  padding: 30px;
}