Three concentric circles grow and fade and then wrap back to radius zero to repeat the process. I saw a similar animation artfully employed to advance scenes. site 
output.innerHTML = `<svg viewBox="0 0 100 100" stroke=red fill=none stroke-width=0.3> <circle cx=50 cy=30 r=1 fill=red /> <circle id=c1 cx=50 cy=30 r=10 /> <circle id=c2 cx=50 cy=30 r=10 /> <circle id=c3 cx=50 cy=30 r=10 /> </svg>`
The radius r increases by a saw-tooth of period 15 with each at phase 𝜑 offset by 5. The motion is made smooth by shaping the opacity by a raised-cosine over the same interval. wikipedia
function frame() { let t = Date.now()/200 let cos = a => 0.5 - 0.5 * Math.cos(a) let dt = (c,𝜑) => { let z = (t+𝜑)%15 c.setAttribute('r',z*.7) c.setAttribute('stroke-opacity',cos(z*.42))} dt(c1,0); dt(c2,5); dt(c3,10) requestAnimationFrame(frame) } frame()
http://js.ward.asia.wiki.org/assets/pages/snippet-template/basicjs.html?snippet-template HEIGHT 200
We decided this example was simple enough to use to finally learn something about modern CSS animation.