svg animations

svg, js, css

by Oleh Kotsubko

HTML

<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
       y="0px"
       viewBox="0 0 52 65" style="enable-background:new 0 0 52 65;" xml:space="preserve">


        <path id="check" fill="none" stroke="#ffffff" stroke-dasharray="418" stroke-dashoffset="0"
                  d="M38.62,40.41H2.46A2.21,2.21,0,0,1,.25,38.2V31.43H40.33a.5.5,0,0,1,.5.5v6.27A2.21,2.21,0,0,1,38.62,40.41Z
                     M27.23,40.41v3.2l2.44,2.89a.5.5,0,0,1-.38.82H11.78a.5.5,0,0,1-.38-.82l2.44-2.89V40.44
                     M32.55,11.64h6.07a2.21,2.21,0,0,1,2.21,2.21V31.43H.25V13.85a2.21,2.21,0,0,1,2.21-2.21H8.35
                     M29,3.79a12.19,12.19,0,1,1-17,0
                     M20.54,8A12.12,12.12,0,0,1,12,4.5a.5.5,0,0,1,0-.72,12,12,0,0,1,17,0,.5.5,0,0,1,0,.72A12.12,12.12,0,0,1,20.54,8Z
                     M20.54,24.71A12.12,12.12,0,0,1,12,21.25a.5.5,0,0,1,0-.72,12.17,12.17,0,0,1,17,0,.5.5,0,0,1,0,.72A12.12,12.12,0,0,1,20.54,24.71Z
                     M20.54,24.71c-2.8,0-5-5.35-5-12.19S17.73.33,20.54.33s5,5.35,5,12.19S23.34,24.71,20.54,24.71Z
                     M20.54,24.71"
        >


             <animate id="p1" attributeName="stroke-dashoffset" begin="svg1.click" values="418; 0" dur="10s"
                      repeatCount="1"
                      fill="freeze"  calcMode="easeIn"></animate>
      </path>

</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 463 463" enable-background="new 0 0 463 463">
  <g>
  <path fill="none" stroke="#ffffff" stroke-dasharray="0" stroke-dashoffset="0" d="m274.997,247.787l.968-15.482c12.641,4.443 25.888,6.695 39.535,6.695 65.893,0 119.5-53.607 119.5-119.5s-53.607-119.5-119.5-119.5c-63.373,0-115.373,49.589-119.258,112h-37.133c-17.716,0-34.151,7.11-46.281,20.022-12.129,12.911-18.2,29.759-17.095,47.438l4.27,68.326c0.08,29.568 12.534,56.017...

CSS

body {
  background: #20262E;
  text-align: center;
}

svg {
  width: 200px;
}

JavaScript

document.getElementById('btn-length').addEventListener('click', function(){
	let tLength = document.getElementById('s');
  alert(Math.round(tLength.getTotalLength()));
});