title: SVG Animation: Stroke/Border not complete
body: <p>I have a company logo I'm trying to make the outside (square) border animate in and out. I'm currently using the dasharray and dashoffset properties to help me to do. <a href="https://css-tricks.com/svg-line-animation-works/" rel="nofollow noreferrer">Here</a> is an article that explains it.</p>
  
  <p>I have it working, however the border doesn't seem to start at the very beginning, or complete the animation to the very end.</p>
  
  <p><a href="http://codepen.io/ghall/pen/BWKaeq" rel="nofollow noreferrer">Here</a> is a CodePen with my working example</p>
  
  <p>Here is my code:</p>
  
  <p>SVG</p>
  
  <pre><code>  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.73 388.23"&gt;
      &lt;title&gt;Asset 3 1&lt;/title&gt;
    &lt;g id="Layer_2" data-name="Layer 2"&gt;
      &lt;g id="Layer_1-2" data-name="Layer 1"&gt;
        &lt;g id="aptive"&gt;
          &lt;g&gt;
            &lt;path d="M224.53,209.33c-7.58,10.92-23.23,15.2-35.1,8.89-10.91-5.8-15.31-19.09-12.15-30.69A25.74,25.74,0,0,1,187,173.26a25.12,25.12,0,0,1,18.32-4A29.55,29.55,0,0,1,223,178.85c.49.55,1.41,1.34,1.57,2.07a5.13,5.13,0,0,1,0,1v27.41Zm1-54.36c-11-9-26.25-11.75-39.85-8.09A46.85,46.85,0,0,0,158,168.12a53.24,53.24,0,0,0-5.91,39,48.34,48.34,0,0,0,26,32.92c13.45,6.37,30,6.63,42.82-1.51a42.13,42.13,0,0,0,4.64-3.43v7.08c0,.59-.11.51.35.61a12.21,12.21,0,0,0,2.21,0h22.06V149c0-.31.18-1.36,0-1.62s-1.47-.09-1.84-.09H225.51Z" fill="#3cd52e"/&gt;
            &lt;path d="M312.21,221.15a28.45,28.45,0,0,1-19-7.27,26.91,26.91,0,0,1-3.32-3.62,2.36,2.36,0,0,1-.68-1.26,28.75,28.75,0,0,1,0-3.31V182.2a7.74,7.74,0,0,1,0-1.16,3.08,3.08,0,0,1,.89-1.39,29.68,29.68,0,0,1,7.56-6.51,28.92,28.92,0,0,1,19.84-3.76c12.31,2.28,20.08,14,20,26.06a26.83,26.83,0,0,1-5.88,16.84,24.53,24.53,0,0,1-14.76,8.48,27,27,0,0,1-4.57.38m3.94-75.83a44.26,44.26,0,0,0-28,9.65V147.9c0-.59.11-.51-.35-.61a12.22,12.22,0,0,0-2.21,0H263.56v141.8c0,.16-.1.81,0,.94s1.27.05,1.56.05h23.16c.12,0,.79.09.88,0s0-1.23,0-1.44V236.12a40.85,40.85,0,0,0,17.42,7.94,48.19,48.19,0,0,0,49-21.75,53.38,53.38,0,0,0,6.64-36.42A50.29,50.29,0,0,0,347.71,158a45.77,45.77,0,0,0-27.54-12.55q-2-.17-4-.17" fill="#3cd52e"/&gt;
            &lt;path d="M458.41,129.76a16.75,16.75,0,0,0,15.74-10.67A16.41,16.41,0,0,0,469,100.68a17.46,17.46,0,0,0-19.27-1.3,16.37,16.37,0,0,0-7.74,17.3,16.66,16.66,0,0,0,16.42,13.09" fill="#3cd52e"/&gt;
            &lt;path d="M445.61,242.82h25.61V148.67c0-.21.15-1.2,0-1.36s-2.21,0-2.59,0h-23v95.52Z" fill="#3cd52e"/&gt;
            &lt;path d="M552.17,147.29l-8.91,19.82-14.08,31.33L526,205.59l-4.92-10.95L510.8,171.81l-9-20L500.53,149a6.09,6.09,0,0,0-.67-1.49c-.22-.24-.27-.18-.69-.18h-26l5.07,11,11.88,25.83,13.69,29.77,10.5,22.84,2.5,5.44c.1.21.18.51.35.61a5,5,0,0,0,1.63,0h14.5c.32,0,1.22.17,1.5,0s.26-.51.34-.68l1-2.07,9-19.48,13.37-29.08,12.79-27.81L578.42,148l.34-.73H552.17Z" fill="#3cd52e"/&gt;
            &lt;path d="M595.9,182.75c1-7.29,6.91-13.3,13.71-15.62a19.63,19.63,0,0,1,20.88,5.13,18.31,18.31,0,0,1,4.79,10.49H595.9Zm65.59,11.42a52.57,52.57,0,0,0-8.65-29.24,44.18,44.18,0,0,0-23-17.56,46.23,46.23,0,0,0-30.63,1.13,45,45,0,0,0-21.72,18.65A54.49,54.49,0,0,0,569.9,196a51.27,51.27,0,0,0,8.48,28.27,46.33,46.33,0,0,0,21.74,17,56,56,0,0,0,31.56,2.25,53.42,53.42,0,0,0,16.72-6.68,46.15,46.15,0,0,0,7.13-5.41,42.09,42.09,0,0,0,3-3.08c.49-.56.66-.47.37-.93a15.47,15.47,0,0,0-2.24-2.24L653,221.56l-7.23-7.22-1.26-1.25c-6,6.53-14.74,10.92-23.68,11a26.13,26.13,0,0,1-21.27-10,25.36,25.36,0,0,1-4.88-12.65h64.78a4.6,4.6,0,0,0,1.15,0c.05,0,.19,0,.23,0,.35-.26.33-2.13.38-2.58a46.27,46.27,0,0,0,.23-4.7" fill="#3cd52e"/&gt;
            &lt;path d="M409.31,120.7H383.71v26.59H359.83v19a8.65,8.65,0,0,0,0,2.4c.12.32,0,.23.5.23H381a10.91,10.91,0,0,1,2.37,0c.42.1.19-.11.3.28a7.78,7.78,0,0,1,0,1.88v22.38c0,4.92-.12,9.87.15,14.78.49,8.84,2.41,17.72,8.4,24.53,6.18,7,15.24,10.49,24.35,11.57a68.4,68.4,0,0,0,16.75-.24c.49-.06,2.29-.06,2.55-.44.07-.1,0-.49,0-.61V221.15a47.35,47.35,0,0,1-11.31,1c-3.68-.1-7.54-.85-10.5-3.17-4.36-3.41-4.77-9.09-4.77-14.23V169h25.61c.15,0,.8.1.92,0s0-.21,0-.36a29.49,29.49,0,0,0,0-4.17V147.29H409.31V120.7Z" fill="#3cd52e"/&gt;
          &lt;/g&gt;
        &lt;/g&gt;
        &lt;rect id="perimeter" x="11" y="11" width="790.73" height="366.23" fill="none" stroke="#3cd52e" stroke-width="22"/&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    #perimeter {
    stroke-dasharray: 2313.919921875;
    stroke-dashoffset: 2313.919921875;
     animation: dash 5s linear alternate infinite;
  }
  
  @keyframes dash {
    from {
      stroke-dashoffset: 2313.919921875;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  </code></pre>