title: How to achieve this svg animation?
body: <p>world. I am a noob coder, was hoping to get my question answered here for the first time!</p>
  
  <p>I am trying to get something like <a href="https://ivomynttinen.com/" rel="nofollow noreferrer">these</a> (the three animations right under the banner) svg animations for my own website.</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-css lang-css prettyprint-override"><code>/* CSS */
  
  svg {
        max-width: 95%;
        max-height: 95%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    /* HTML */ 
  
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="212px"
        height="154px" viewBox="0 0 212 154" style="enable-background:new 0 0 212 154;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
       .st0{fill:#999999;}
       .st1{fill:none;stroke:#999999;stroke-miterlimit:10;}
      &lt;/style&gt;
      &lt;defs&gt;
      &lt;/defs&gt;
      &lt;g&gt;
       &lt;path class="st0" d="M211,1v152H1V1H211 M212,0H0v154h212V0L212,0z"/&gt;
      &lt;/g&gt;
      &lt;line class="st1" x1="62.5" y1="1" x2="62.5" y2="153"/&gt;
      &lt;polyline class="st1" points="1,97.65 14.31,97.65 62,97.65 "/&gt;
      &lt;line class="st1" x1="14.39" y1="153" x2="14.39" y2="98"/&gt;
      &lt;line class="st1" x1="62.1" y1="125.82" x2="14.9" y2="125.82"/&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've made the svg via illustrator, and then exported the code into my coding program of choice, however I am unsure how to actually animate the lines so that it starts at one point and traces to another in a different color, in a variety of directions.</p>
  
  <p>Hopefully i'm making sense here, any help would be awesome. Let me know if you have any solutions or resources that can help me to achieve this.</p>