title: SVG - scale path from center repetitively (pulsating)
body: <p>I have an svg graphic with a central point at (100, 100).</p>
  
  <pre><code>&lt;g id="centre"&gt;
   &lt;circle cx="100" cy="100" r="2"/&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>A path (like a circle) should <strong>surround</strong> it and pulsate - I mean, it should <strong>scale itself from 0 to a value</strong>, <strong>centralized</strong> on the point (100,100).
  While doing this the pulse should also start with opacity=0, to opacity=0.5 and back to opacity=0.
  <em>(I don't want to use  instead of path.)</em></p>
  
  <hr>
  
  <p>The whole thing looks like this:</p>
  
  <pre><code>&lt;g transform="translate(100,100)"&gt;
      &lt;g id="pulse" &gt;
          &lt;radialGradient id="SVGID_4_" cx="100" cy="100" r="21.2498" gradientUnits="userSpaceOnUse"&gt;
              &lt;stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/&gt;
              &lt;stop  offset="1" style="stop-color:#006837" /&gt;
          &lt;/radialGradient&gt;
          &lt;path opacity="0.5" fill="url(#SVGID_4_)" stroke="url(#SVGID_4_)" stroke-width="0.5" stroke-miterlimit="10" d="M120.864,99.676
              c0,11.599-9.401,21-21,21c-11.598,0-21-9.401-21-21c0-11.598,9.402-21,21-21c6.705,0,12.679,3.144,16.523,8.037
              C119.193,90.281,120.864,94.783,120.864,99.676z" /&gt;
          &lt;animateTransform 
              attributeType="xml"
              attributeName="transform"
              type="scale"
              from="0"
              by="3"
              dur="2s" 
              fill="freeze"           
              repeatCount="indefinite"
              /&gt;  
          &lt;animate 
              attributeType="xml" 
              attributeName="fill-opacity" 
                  from="0" 
                  to="0" 
                  values="0;0.5;0"
              dur="2s" 
              repeatCount="indefinite" 
              fill="freeze" /&gt;            
      &lt;/g&gt;
  &lt;/g&gt;
  
  &lt;g id="centre"&gt;
      &lt;circle cx="100" cy="100" r="2"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <hr>
  
  <p>It does not work as I want, the pulse starts from the middle but <strong>moves down to the right</strong>, while scaling up.
  Does anybody know how to do it right? 
  Thanks in advance.
  <em>(I looked up several other posts, but it did not help me)</em></p>