title: SVG: How to animate a path's height?
body: <p>I'm trying to create the rounded edges using <code>svg</code> <code>rect</code> tag. But <code>rx</code> and <code>ry</code> is making the rounded edges in four edges. Instead I'm trying to create only two edges (top left and top right). Same thing I have done with <code>path</code> command (Working <a href="https://jsfiddle.net/pbdst0ms/" rel="nofollow noreferrer">JS Fiddle</a>). </p>
  
  <p>The reason of creating <strong>rect</strong> is I'm trying to create the animated grow height. </p>
  
  <pre><code>&lt;rect x="50" y="0" fill="#f00" width="100" height="100"&gt;
      &lt;animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" /&gt;
  &lt;/rect&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>EDITED</strong></p>
  
  <p>The following code will give the rounded corner what I have expected. I have used Cubic Curve method.</p>
  
  <pre><code>&lt;svg style="width:500px; height:800px;"&gt;
      &lt;path class="draw" d="M 75 445 L75 116.66666666666669 C 80 91.66666666666669 120 91.66666666666669 125 116.66666666666669 L125 445 75 445" style="stroke: rgb(192, 31, 31); stroke-width: 2px; fill: rgb(216, 62, 62);"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>My question/problem is when I create the animation in path, height is not growing with animation. </p>