SVG Animation Practice

by wuct

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80">

<circle id="bg" class="st0" cx="40" cy="40" r="40" fill='#FFFFFF'/>
 
<path id="outline" class="st1" d="M58.6,27.1c-2.3-2.6-5.5-4-8.9-4c-2.7,0-5.5,1-7.8,2.8c-0.7,0.5-1.3,1.1-1.8,1.7
	c-0.6-0.6-1.2-1.2-1.8-1.7c-2.3-1.8-5-2.8-7.8-2.8c-3.4,0-6.5,1.4-8.9,4c-2.3,2.5-3.5,5.8-3.5,9.3c0,2.6,0.5,5.1,1.5,7.5
	c1.4,3.3,3.7,6.3,7.1,9.1c3.1,2.6,7,5,11.9,7.3c0.5,0.2,1,0.3,1.5,0.3s1.1-0.1,1.5-0.3c4.9-2.3,8.8-4.7,11.8-7.2
	c3.4-2.8,5.7-5.8,7.1-9c1-2.4,1.6-5,1.6-7.6C62.2,32.9,60.9,29.6,58.6,27.1z M30.6,24.2c2.5,0,5,0.9,7.1,2.6c0.8,0.6,1.5,1.3,2.1,2
	l0.4,0.5l0.4-0.5c0.6-0.7,1.3-1.4,2.1-2c2.1-1.7,4.7-2.6,7.1-2.6c3.1,0,6,1.3,8.1,3.6c2.1,2.3,3.3,5.4,3.3,8.6c0,2.5-0.5,5-1.5,7.3
	c-1.4,3.1-3.6,6-6.8,8.7c-3,2.5-6.8,4.8-11.6,7.1c-0.7,0.3-1.5,0.3-2.2,0c-4.9-2.3-8.7-4.6-11.7-7.2c-3.2-2.7-5.5-5.6-6.8-8.8
	c-0.9-2.2-1.4-4.6-1.4-7.1c0-3.2,1.2-6.3,3.3-8.6S27.5,24.2,30.6,24.2z">
    <animate
             attributeName="opacityz" attributeType="XML"
             values="0.3;1;0.3"
             begin="0" dur="1s"
             fill="freeze" repeatCount="indefinite"/>
</path>
    
<path id="heart" class="st2" d="M23.9,44.6C23.9,44.6,23.9,44.6,23.9,44.6c1.2,2.3,3.1,4.2,5.3,6.1c2.6,2.3,6,4.4,10.3,6.4
	c0.6,0.3,1.3,0.3,1.9,0c4.2-2.1,7.5-4.1,10.2-6.3c2.8-2.4,4.8-5,6-7.7c0.9-2.1,1.3-4.9,1.3-7.1c0-2.8-1-5-2.9-7s-4.5-2.7-7.2-2.5
	c-5.9,0.3-8.5,6.3-8.5,6.3s-2.8-5.8-8.5-6.3C29,26.3,26.5,27,24.6,29c-1.8,2-2.9,4.2-2.9,7c0,2.3,0.4,4.9,1.4,6.9
	C23.3,43.5,23.6,44,23.9,44.6C23.8,44.5,23.8,44.5,23.9,44.6"/>
        <animate
             attributeName="stroke-dashoffset" attributeType="XML"
             from="10" to="228"
             begin="0" dur="2.5s"
             fill="freeze" repeatCount="indefinite"/>
</path>
    
<path id="wave" class="st2"...

CSS

svg {
    width: 180px;
}
#bg {
    fill: #FFFFFF;
}
#outline {
    fill: #F39A1E;
}
.st2 {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit:10;
    stroke:#F39A1E;
    fill: none;
    stroke-width:2
}

#heart {
   stroke-dasharray: 114, 114;
}
#wave {
   stroke-dasharray: 100%, 100%
}