SVG Ripple Effect: не получается анимация Ripple Effect

Question

Я борюсь с эффектом ряби, используя SVG. Я ударил по анимациям, не получая должного эффекта ряби, нужно три ряби после того, как два ряби должны спрятаться, а также плавность, есть ли какие-либо возможности при использовании трех разных анимаций, кто угодно может направить меня в правильном направлении. СпасибоЗаранее.

body{ background: #802a10d6;}
svg {
  position: relative;
  z-index: 10;
  transition: all 0.5s linear;
}
img {
   position: absolute;
    height: 66px;
    width: 66px;
    top: 75px;
    left: 75px;
    transition: all 1.5s linear;
}
.rp1,
.rp2,
.rp3 {
  content: ' ';
  position: absolute;
  transition: all 1.5s linear;
  z-index: 1;
  animation: pulse 2s linear infinite;
}
.rp1 { animation-delay: 0.5s; }
.rp2 {animation-delay: 0.7s; }
.rp3{ animation-delay: 1s; }
@keyframes pulse {
  to{
    opacity: 0;
    transform: scale(1);
    transition: all 0.5 linear;
  }
  



 

<?xml version="1.0" 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" height="900" width="900">
  <svg>
      <circle class="rp1" cx="100" cy="100" r="35" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp2" cx="100" cy="100" r="45" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp3" cx="100" cy="100" r="55" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <img src="https://image.ibb.co/dBkJkV/person-4.png"/>
  </svg>
</svg>

Answer 1

Я надеюсь, что это то, чего вы хотели достичь.Наблюдение: хотя вы можете использовать opacity здесь, я бы использовал stroke-opacity

body{ background: #802a10d6;}
svg {
  position: relative;
  /*z-index: 10;
  transition: all 0.5s linear;*/
  border:1px solid
}
/*img {
   position: absolute;
    height: 66px;
    width: 66px;
    top: 75px;
    left: 75px;
    transition: all 1.5s linear;
}*/
.rp1,
.rp2,
.rp3 {
  /*content: ' ';
  position: absolute;
  transition: all 1.5s linear;
  z-index: 1;*/
  stroke-opacity: 0;
  animation: pulse 2s linear infinite;
}
.rp1 { animation-delay: 0.5s; }
.rp2 {animation-delay: 0.7s; }
.rp3{ animation-delay: 1s; }
@keyframes pulse {
  0%{stroke-opacity: 0;}
  50%{stroke-opacity: 1;}
  100%{
    stroke-opacity: 0;
    /*transform: scale(1);
    transition: all 0.5 linear;*/
  }

<svg height="200" width="200">

      <circle class="rp1" cx="100" cy="100" r="35" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp2" cx="100" cy="100" r="45" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp3" cx="100" cy="100" r="55" stroke="#ffffff" stroke-width="2" fill="transparent" />
    
      <image xlink:href="https://image.ibb.co/dBkJkV/person-4.png" height="66" width="66" x="66" y="66"></image>

</svg>