title: SVG animated circles to the center vertically and horizontally
body: <p>I am trying to create an SVG loading placeholder and I want to place the 3 animated <strong>circles to the center vertically and horizontally</strong> in the rectangle without overlapping each other. I tried putting them in a <code>g</code> and applying <code>width</code> and <code>margin</code> using CSS but that did not work. Is there a way to achieve it?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="200" viewBox="0 0 500 100"&gt;
        &lt;rect width="100%" height="100%" fill="#f3f3f3"/&gt;
        &lt;circle fill="#2FC143" stroke="none" cx="6" cy="50" r="6"&gt;
          &lt;animateTransform attributeName="transform" dur="1s" type="translate" values="0 15 ; 0 -15; 0 15" repeatCount="indefinite" begin="0.1"&gt;&lt;/animateTransform&gt;
        &lt;/circle&gt;
        &lt;circle fill="#2FC143" stroke="none" cx="30" cy="50" r="6"&gt;
          &lt;animateTransform attributeName="transform" dur="1s" type="translate" values="0 10 ; 0 -10; 0 10" repeatCount="indefinite" begin="0.2"&gt;&lt;/animateTransform&gt;
        &lt;/circle&gt;
        &lt;circle fill="#2FC143" stroke="none" cx="54" cy="50" r="6"&gt;
          &lt;animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"&gt;&lt;/animateTransform&gt;
        &lt;/circle&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>