title: Scaling in SVG animation, only CSS3
body: <p>I am learning svg animation and I have problems with scaling. Examples are very complicated and contain javascript.
  I want to make a smoke animation. A flat circle going from up to down with a scaling effect (from scale(1) to scale(0.5). But when I use this code the animation goes up, not down and doesn't work. Help?</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;p data-height="265" data-theme-id="0" data-slug-hash="KeGXOa" data-default-tab="html,result" data-user="VoltarZord" data-embed-version="2" data-pen-title="SmokeDown" class="codepen"&gt;See the Pen &lt;a href="https://codepen.io/VoltarZord/pen/KeGXOa/"&gt;SmokeDown&lt;/a&gt; by Voltar Zord (&lt;a href="https://codepen.io/VoltarZord"&gt;@VoltarZord&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
  &lt;script async src="https://static.codepen.io/assets/embed/ei.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>