title: SVG fill page load animation
body: <p>I am trying to create a page load animation where a SVG line appears with a drawing effect, afterwards the line should expand all the way to the top left so the screen gets filled and I can put content on top of the filled screen, I came across anime.js and I got the first part working,</p>
  
  <pre><code>&lt;div class="line"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1173.98 1399.25"&gt;
          &lt;g id="line"&gt;
              &lt;path class="cls-1" d="M1168.8,89.74a259.34,259.34,0,0,0-25-21c-40.32-29.78-78.88-40.21-105-47-27.1-7-84.53-21.37-159-10-14.65,2.24-80.68,13.21-152,59-34.75,22.31-55.62,43.17-93,81-52.81,53.45-61.88,72.92-125,147-52.64,61.79-84.15,98.76-133,142-19.42,17.19-56.54,44.69-130,99-113.65,84-125,89.77-149,117-24.89,28.2-63.75,73.27-81,144-5.72,23.48-20.52,87.83,6,159,9.42,25.27,20.56,42,34,62,24.8,36.81,51.52,66,124,130,98.55,87.06,147.82,130.59,156,136,10.78,7.12,38,24.52,58,58a166.3,166.3,0,0,1,20,52" /&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
  .cls-1 {
    fill: none;
    stroke: #000;
    stroke-miterlimit: 10;
    stroke-width: 15px;
  }
  
  var lineDrawing = anime({
      targets: '.line #line path',
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'easeInOutSine',
      duration: 2000,
      delay: function (el, i) { return i * 250 },
      direction: 'alternate',
      loop: false
  });
  </code></pre>
  
  <p>To get the fill effect I was looking around online and I saw that I could use morphing effects to achieve what I want, however my SVG line does not have any <code>&lt;polygon points</code>, what could I do t get the effect anyway?</p>