grad fill

by Vitaliy

HTML

<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361.29 259.83">
	 <linearGradient id="grad" x1="0%" y1="0%" x2="1%" y2="0%">
      <stop offset="100%"  class="color-purple" />
      <stop offset="100%"  class="color-transparent" />
    </linearGradient>
	<title>wolf_cleaner_шкала</title>
	<path class="cls-1" d="M1448.37,313.8c-7.29-99.27-94-174.08-193.24-166.79a181.07,181.07,0,0,0-36.37,6.42l-0.09,0q-2,.56-3.94,1.18l-0.52.16q-1.78.56-3.55,1.15l-1,.33q-1.56.54-3.11,1.1l-1.52.56-2.55,1-2.37,1-1.69.69c-65.07,27.3-110.89,91.66-110.89,166.53a179,179,0,0,0,16.37,75.19,7,7,0,0,0,12.68-5.82,166.58,166.58,0,0,1,71.21-215.27l0.25-.12a166.7,166.7,0,0,1,15.81-7.65l1.46-.6,2.25-.91L1210,171l1.32-.49q1.49-.54,3-1.06l0.71-.24q1.73-.58,3.48-1.13l0.2-.06a166.86,166.86,0,0,1,126.88,11.63,7,7,0,0,0,1.1.46,166.57,166.57,0,0,1,74.4,213.43,7,7,0,0,0,12.79,5.58A180.89,180.89,0,0,0,1448.37,313.8Z" transform="translate(-1087.56 -146.52)"/>
	<path class="cls-2" d="M1448.37,313.8c-7.29-99.27-94-174.08-193.24-166.79a181.07,181.07,0,0,0-36.37,6.42l-0.09,0q-2,.56-3.94,1.18l-0.52.16q-1.78.56-3.55,1.15l-1,.33q-1.56.54-3.11,1.1l-1.52.56-2.55,1-2.37,1-1.69.69c-65.07,27.3-110.89,91.66-110.89,166.53a179,179,0,0,0,16.37,75.19,7,7,0,0,0,12.68-5.82,166.58,166.58,0,0,1,71.21-215.27l0.25-.12a166.7,166.7,0,0,1,15.81-7.65l1.46-.6,2.25-.91L1210,171l1.32-.49q1.49-.54,3-1.06l0.71-.24q1.73-.58,3.48-1.13l0.2-.06a166.86,166.86,0,0,1,126.88,11.63,7,7,0,0,0,1.1.46,166.57,166.57,0,0,1,74.4,213.43,7,7,0,0,0,12.79,5.58A180.89,180.89,0,0,0,1448.37,313.8Z" transform="translate(-1087.56 -146.52)"/>
	
</svg>

CSS

.cls-1{
  fill:url(#grad);
  } 
 .cls-2{fill:none;}
 .color-transparent {
    stop-color:transparent;
    stop-opacity:1;
}

.color-purple {
    stop-color:#B05BE0;
    stop-opacity:1;
}

JavaScript

/* SVG background-fill part of a shape */

function setProgress (percentage) {
  document.getElementById('grad').setAttribute('x2', (percentage) + '%');
}

// change this value and run the fiddle to see the change
var x = 1;
var timer = setInterval(function(){ 
    					  setProgress(x);
                console.log(x);
    					  if (x == 100) {
                              clearInterval(timer);
                          }
    					  x+=10;
                          },50);