title: Responsive SVG rectangle
body: <p>I <a href="https://codepen.io/seanmccaffery/pen/xBpbG" rel="nofollow noreferrer">found</a> a very good example of svg button animation but the size of the button is static - 320px x 60px. I would like to have the button responsive - it is svg rectangle, but I struggle to achieve that.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="svg-wrapper"&gt;
    &lt;svg class="svg-responsive" viewBox="0 0 320 60" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;rect class="shape" width="100%" height="100%"/&gt;
    &lt;/svg&gt;
    &lt;div class="text"&gt;HOVER&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.svg-wrapper {
    border: 1px solid red;
    position: relative;
  
    height: 0;
    padding-top: 16.6%;
  }
  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .shape {
    width: 100%;
    height: 100%;
    fill: salmon;
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
    stroke: #19f6e8;
  }
  
  .text {
    color: #fff;
    font-family: "Roboto Condensed";
    font-size: 22px;
    letter-spacing: 8px;
    line-height: 32px;
    position: relative;
    top: -48px;
  }
  
  @keyframes draw {
    0% {
      stroke-dasharray: 140 540;
      stroke-dashoffset: -474;
      stroke-width: 8px;
    }
    100% {
      stroke-dasharray: 760;
      stroke-dashoffset: 0;
      stroke-width: 2px;
    }
  }
  
  .svg-wrapper:hover .shape {
    -webkit-animation: 0.5s draw linear forwards;
    animation: 0.5s draw linear forwards;
  }
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/dePNLG" rel="nofollow noreferrer">https://codepen.io/anon/pen/dePNLG</a></p>
  
  <p>Already read a <a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/" rel="nofollow noreferrer">tutorial</a> on the matter and I followed all the steps for inline svg but I guess I'm missing something.
  Can you help me get that SVG rectangle responsive?</p>