Trying to animate this specific svg
<p>I got this svg exported from Adobe Illustrator.</p>

<pre><code>&lt;?xml-stylesheet href="star.css" type="text/css"?&gt;

&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"&gt;

    &lt;g id="star"&gt;
        &lt;path id="star-1" class="st0" d="M37.9,27.9L49.3,5c0.3-0.6,0.8-0.6,1.1,0l11.3,22.9c0.3,0.6,1.1,0.9,1.7,0.7
            c0.7-0.2,0.9-0.8,0.6-1.5L52,2.7c-0.5-1-1.3-1.6-2.2-1.6c-0.9,0-1.7,0.6-2.2,1.6L35.9,26.6c-0.3,0.6-0.1,1.4,0.5,1.7
            C36.9,28.7,37.6,28.5,37.9,27.9z"/&gt;

        &lt;path id="star-2" class="st0" d="M71.3,31.8c-0.7-0.1-1.2,0.1-1.3,0.5c0,0.2-0.1,0.4-0.1,0.6c-0.2,0.7,0.1,1.2,0.7,1.3l26.2,3.8
            L77.9,56.7c-0.5,0.5-0.4,1.1,0.1,1.6c0.5,0.5,1.1,0.7,1.6,0.2l19.1-18.6c0.8-0.8,1.1-1.8,0.9-2.6c-0.3-0.9-1.1-1.4-2.2-1.6
            L71.3,31.8z"/&gt;

        &lt;path id="star-3" class="st0" d="M76.9,66.8c-0.1-0.7-0.8-1.2-1.4-1.1c0,0,0,0,0,0c-0.7,0.1-1.1,0.7-1,1.4l4.5,26.3L55.4,81.1
            c-0.6-0.3-1.4-0.1-1.6,0.6c0,0,0,0,0,0c-0.3,0.6,0,1.4,0.6,1.7l23.4,12.3c0.5,0.3,1,0.4,1.5,0.4c0.7,0,1.2-0.3,1.6-0.7
            c0.3-0.4,0.7-1.1,0.5-2.3L76.9,66.8z"/&gt;

        &lt;path id="star-4" class="st0" d="M44.7,80.9l-24,12.6l4.5-26.3c0.1-0.7-0.3-1.3-1-1.5c0,0,0,0,0,0c-0.7-0.1-1.3,0.3-1.4,1
            l-4.5,26.4c-0.2,1.2,0.2,1.9,0.5,2.3c0.7,0.8,1.9,1,3.1,0.3l23.7-12.5c0.6-0.3,1-1.1,0.7-1.7c0,0,0-0.1,0-0.1
            C46,80.7,45.3,80.5,44.7,80.9z"/&gt;

        &lt;path id="star-5" class="st0" d="M21.9,56.8L2.7,38.1l26.5-3.8c0.7-0.1,1.2-0.7,1-1.4c-0.2-0.6-0.8-1.1-1.5-1L2.3,35.6
            c-1.1,0.2-1.9,0.8-2.2,1.6c-0.3,0.9,0,1.8,0.9,2.6l19.4,18.9c0.5,0.5,1.2,0.4,1.7-0.1c0,0,0,0,0,0C22.5,58.1,22.4,57.3,21.9,56.8z
            "/&gt;
    &lt;/g&gt;

&lt;/svg&gt;
</code></pre>

<p>Here is what i'm trying to accomplish, it should just simply draw from point A to point B, starting from 1 and ends with 5.</p>

<p><a href="https://i.stack.imgur.com/wRsMT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wRsMT.png" alt="enter image description here"></a></p>

<p>And this is what my css looks like:</p>

<pre><code>#star{
  fill-opacity: 0;
  stroke: #37475B;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-star 10s linear forwards;
}

@keyframes draw-star {
  to {
    stroke-dashoffset: 0;
  }
}
</code></pre>

<p>I am pretty much new to SVG animation, or even SVG itself. To be honest I have no idea what i'm doing, i tried looking up for some tutorials but its pretty hard and confusing to create my own points, I have bunch of icons from Illustrator to export but it seems exporting it gave me something like <code>fill</code> not a simple point to point line.</p>

<p>Is the exported SVG possible to do the animation above? If so, can anyone help me with a CSS snipit or if the SVG needs to be edited in some way, so i can have a base to learn? Thanks!</p>