JSFiddle - React, Tailwind, and code Playground

by Mayank Kapahi

HTML

<div style="float:left;">
  <label>Enter Value</label>
  <input id="fill-color" type="textbox" min="0" max="100" name="fillcolor" value="20" onkeydown="process(this)" />%
</div>
<svg id="octocat" version="1.0" xmlns="http://www.w3.org/2000/svg" width="150" height="450" viewBox="0 0 640 1280">
   <defs>
     <linearGradient id="gradient" x2="0%" y1="100%" y2="0%">
      <stop offset="0%" stop-color="#df1c2a"/>
       <stop offset="0%" stop-color="#df1c2a">
          <animate class="animatedStop" attributeName="offset" from="0%" to="0%" dur="3s" fill="freeze" begin="0s"/>
       </stop>
       <stop offset="20%" stop-color="black">
          <animate class="animatedStop" attributeName="offset" from="0%" to="0%" dur="3s" fill="freeze" begin="indefinite"/>  
       </stop>
     </linearGradient>
   </defs>
   <path id="face" fill="url(#gradient)" d="M289.5 1c-24.5 1.5-44.8 5.2-47.7 8.8-1.5 1.8-1.5 21.6.1 29.7.8 4.1.6 5.5-.9 8.5-2.9 5.7-3.4 11.9-1.5 17.8 2 6 8.8 14.4 11 13.5.8-.3 1.5 0 1.5.6s-.5 1.1-1.2 1.1-.6.6.4 1.7c1.3 1.5 1.7 9.8 2.8 53.8l1.2 52-3.1 18c-7.8 45.2-19.6 83.7-48.4 158.5-11.8 30.7-19.7 53.4-19.7 56.2 0 .7 2.5-5.9 5.4-14.7 3-8.8 11-30.4 17.9-48 16.3-41.8 25.2-67.4 32.3-92.3 1.5-5.1 2.9-9 3.1-8.8 1.6 1.6-16.6 57.4-30.3 92.8-15.6 40.3-16.6 43.1-22.5 60.3-3.2 9.3-5.8 15.9-5.9 14.6 0-1.3-.3-2.1-.7-1.8-.3.4-.9 6.2-1.3 12.9-.6 10.2-1.2 13.4-3.5 18.8-13.7 32-26.5 140.3-22.7 192.1 1 13.7 4 31.1 5.4 31.7 1.5.7.8 4.8-1.2 6.5-1.8 1.5-2 2.9-2 14.4 0 18.6 3.2 44.5 12 98.3 8.2 49.7 11.4 75.5 14.9 117.5 3.7 43.9 4.4 58.5 3.8 83.5-.6 24.9-1.3 31.7-6.3 57.1-1.4 7.2-2.3 13.3-2.1 13.5.2.2 1.2-3.5 2.2-8.3 2.3-11.7 3.3-15.4 3.4-12.8.2 3.7-4.9 28.5-12.9 63-4.4 18.7-8.5 36.4-9.1 39.3-1.5 6.3-2.6 7.5-2.2 2.4.2-3.4.1-3.4-.8.8-1.5 6.9-.5 35.5 1.5 41l1.6 4.5-3.6-3.9-3.7-3.9.7 3.9c2 11.4 6.6 19 16.5 27.3 10.6 8.8 24.3 13.9 49.6 18.6 20.7 3.8 43.3 5.5 81.5 6.2 84.2 1.4 142.2-6.8 171.2-24.3 6.4-3.9 14.1-11.9 15.6-16.3.9-2.5.8-2.8-.8-2.4-1.7.5-1.7.2-.5-3.4.7-2.1 1.6-5.2...

JavaScript

function process(ele) {
  if(event.key === 'Enter') { 
    Array.from(document.getElementsByClassName("animatedStop")).forEach((animation) => {
      animation.setAttribute("to", ele.value + "%");
      animation.beginElement();
      });
    }
  }