Trying to animate this specific svg - html

Question

I got this svg exported from Adobe Illustrator.
<?xml-stylesheet href="star.css" type="text/css"?>
<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">
<g id="star">
<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"/>
<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"/>
<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"/>
<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"/>
<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
"/>
</g>
</svg>
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.
And this is what my css looks like:
#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;
}
}
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 fill not a simple point to point line.
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!

Answer 1

You can use the animate on each of the paths of the start:
svg {
width: 200px;
padding: 5px;
}
#star{
fill-opacity: 0;
stroke: #37475B;
stroke-width: 1;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
<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">
<g id="star">
<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"/>
<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"/>
<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"/>
<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"/>
<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
"/>
</g>
<animate xlink:href="#star-1" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-1-anim" />
<animate xlink:href="#star-2" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-2-anim" begin="+1.5s"/>
<animate xlink:href="#star-3" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-3-anim" begin="+3s"/>
<animate xlink:href="#star-4" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-4-anim" begin="+4.5s"/>
<animate xlink:href="#star-5" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-5-anim" begin="+6s"/>
</svg>
Hope it's what you were looking for.

Answer 2

You will have to fix a couple of things if you want this to work.
Firstly for the CSS line animation trick to work, you will need to change your triangle shapes to use a single stroke (ie. two lines) instead of an outline around the outside. See my answer on this other question for an explanation of that.
Secondly, you've got five separate shapes. If you want them to animate in sequence, one after the other, then you will have to time the animations. The animations for paths 2-5 will need to have a delay applied. You can do that with the animation-delay rule.
Demo
#star path {
fill: none;
stroke: #37475B;
stroke-width: 1;
stroke-dasharray: 190;
stroke-dashoffset: 190;
animation-name: draw-star;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes draw-star {
to {
stroke-dashoffset: 0;
}
}
#star-2 {
animation-delay: 2s;
}
#star-3 {
animation-delay: 4s;
}
#star-4 {
animation-delay: 6s;
}
<svg width="300px" height="300px">
<g id="star">
<path id="star-1" d="M 100,90 L150,10 L 200,90" />
<path id="star-2" d="M 210,100 L 290,150 L 210,200" />
<path id="star-3" d="M 200,210 L150,290 L 100,210" />
<path id="star-4" d="M 90,200 L 10,150 L 90,100" />
</g>
</svg>