svgで波紋のような画像を作る

svgで波紋が広がるようなアニメーションを作ってみた．
radialGradientの中身をアニメーションさせるだけなんだけれど，殊の外苦労した．
stop要素は記述順に意味を持つので，処理の都合上stop要素を5つ用意してopacityが常に周期的に並ぶようにしたのがミソ．

<?xml version="1.0" standalone="no"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
  <radialGradient id="rg" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="50" spreadMethod="repeat">
   <stop offset="0" stop-color="red">
    <animate id="anim" attributeName="stop-opacity" 
     calcMode="linear" begin="0s" dur="6s"
     values="0;1;0" keiTimes="0;0.5;1" repeatCount="indefinite"/>
   </stop>
   <stop stop-color="red">
    <animate attributeName="offset" 
     calcMode="linear" begin="0s" dur="6s"
     values="0;0;0.5" keiTimes="0;0.5;1" repeatCount="indefinite"/>
    <animate attributeName="stop-opacity" 
     calcMode="linear" begin="0s" dur="6s"
     values="0;1;1" keiTimes="0;0.5;1" repeatCount="indefinite"/>
   </stop>
   <stop  stop-color="red" stop-opacity="0">
    <animate attributeName="offset" 
     calcMode="linear" begin="0s" dur="6s"
     values="0;1" keiTimes="0;1" repeatCount="indefinite"/>
   </stop>
   <stop stop-color="red">
    <animate attributeName="offset" 
     calcMode="linear" begin="0s" dur="6s"
     values="0.5;1;1" keiTimes="0;0.5;1" repeatCount="indefinite"/>
    <animate attributeName="stop-opacity" 
     calcMode="linear" begin="0s" dur="6s"
     values="1;1;0" keiTimes="0;0.5;1" repeatCount="indefinite"/>
   </stop>
   <stop offset="1" stop-color="red">
    <animate attributeName="stop-opacity" 
     calcMode="linear" begin="0s" dur="6s"
     values="0;1;0" keiTimes="0;0.5;1" repeatCount="indefinite"/>
   </stop>
  </radialGradient>
 </defs>
 <rect id="rect" width="200" height="200" fill="url(#rg)"/>
</svg>