SVG Ripple Effect: Not Getting Proper Ripple Effect Animations - html

Question

I am struggling on ripple effect using SVG I struck on animations not getting proper ripple effect need three ripples after two ripples third should hide and also the smoothness is there any possibilities by using three different animations can anyone point me in right direction Thanks In Advance.
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

I hope this is what you wanted to achieve. Observation: although you can use opacity here, I would use 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>