Заливка слоя-маски

#пуск {cursor: pointer;} 
#жижа {stroke:#a50;  
       stroke-linecap: butt;  
       stroke-width:200%;  
       stroke-opacity:.6}

<!-- SVG код --> 
<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg version = "1.1" 
     baseProfile="full" 
     xmlns = "http://www.w3.org/2000/svg"  
     xmlns:xlink = "http://www.w3.org/1999/xlink" 
     xmlns:ev = "http://www.w3.org/2001/xml-events" 
     height = "200px"  width = "200px" 
     viewBox="0 0 200 200" preserveAspectRatio="none" 
     style ="border: 1px solid blue;"> 
<title>SVG анимация - линии</title> 
   
  <defs> 
    <path id="менза" fill="url(#жижа)" stroke="#daa" stroke-width="2"  
          d="M 50 200 L 25 10 L 175 10 L 150 200 L 100 200 Z" >  
    </path> 
  </defs> 
  <pattern id="жижа" width="100%" height="100%" > 
    <line id="мера" x1="10" y1="200" x2="10" y2="200">  
      <animate id="лей" attributeName="y2" 
               from="200" to="10" 
               begin="пуск.click" dur="1s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
      <animate id="пей" attributeName="y2" 
               from="10" to="200" 
               begin="лей.end+.3s" dur="2s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
    </line> 
  </pattern> 
   
  <use  xlink:href="#менза" /> 
   
  <g id="пуск">  
    <rect x="5" y="160" rx="3" ry="3"  
          width="90" height="30"fill="#552" stroke="#2af" /> 
    <text x="15" y="180" fill="white"  
          font-size="16" font-weight="bold" font-family="Arial" > 
          Наливай 
    </text> 
 </g>  
</svg>

#лить, #пить {cursor: pointer;} 
#жижа {stroke:#f4a; stroke-width:200%;  
       stroke-linecap: butt; stroke-opacity:.8; 
} 
#тринк {box-shadow: #fff 0 0 8px 4px inset; background:  
  repeating-linear-gradient(45deg, transparent, #999, transparent .8%) fixed; 
}

<!-- SVG код --> 
<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg id="тринк" version = "1.1" baseProfile="full" 
     width = "200px" height = "200px"  
     viewBox="0 0 200 200" preserveAspectRatio="none">  
  <defs> 
    <path id="штофф" fill="url(#жижа)" stroke="#0aa" stroke-width="2"  
          d="M 50,190 L 25,10 L 175,10 L 150,190 L 50,190 Z" />  
    <linearGradient id="блик" x1="0" x2="100%"> 
         <stop offset="0%"  stop-color="#0aa"/> 
         <stop offset="38%" stop-color="#eed"/> 
         <stop offset="80%" stop-color="#0aa"/> 
    </linearGradient> 
  </defs> 
 
  <pattern id="жижа" width="100%" height="100%"> 
    <rect width="100%" height="100%"  fill="url(#блик)" fill-opacity=".8" 
          stroke="#0aa"  stroke-width="2"/> 
    <line id="мера" x1="10" y1="200" x2="10" y2="200"/>  
  </pattern> 
   
  <use  xlink:href="#штофф" /> 
   
    <g id="лить">  
    <rect x="55" y="150" rx="3" ry="3"  
          width="90" height="30" fill="#da0" stroke="#288" stroke-width="2"/> 
    <text font-size="16" font-weight="bold" font-family="Arial"> 
      <tspan id="" x="75" y="170" fill="#000">-Лей!-</tspan><!--  --> 
    </text> 
    </g>  
    <g id="пить" style="opacity:0;">  
    <rect x="55" y="30" rx="3" ry="3"  
          width="90" height="30" fill="#0dd" stroke="#288" stroke-width="2"/> 
    <text font-size="16" font-weight="bold" font-family="Arial"><!--  --> 
      <tspan id="" x="75" y="50" fill="#000">-Пей!-</tspan> 
    </text> 
    </g>  
      <animate id="лей" xlink:href="#мера" attributeName="y2" 
               from="200" to="10" 
               begin="лить.click" dur="1s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
      <animate id="лью" xlink:href="#лить" attributeName="opacity" 
               from="1" to="0" 
               begin="лить.click" dur="1s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
      <animate id="лил" xlink:href="#пить" attributeName="opacity" 
               from="0" to="1" 
               begin="лей.end" dur="1s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
   
      <animate id="пей" xlink:href="#мера" attributeName="y2" 
               from="10" to="200" 
               begin="пить.click" dur="2s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
      <animate id="пью" xlink:href="#пить" attributeName="opacity" 
               from="1" to="0" 
               begin="пить.click" dur="1s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
      <animate id="пил" xlink:href="#лить" attributeName="opacity" 
               from="0" to="1" 
               begin="пей.end" dur="1s" 
               repeatCount="1"  
               fill="freeze" 
               restart="whenNotActive" /> 
</svg> 
<svg width="200px" height="200px" ><use  xlink:href="#штофф"/></svg> 
<svg width="200px" height="200px" ><use  xlink:href="#штофф"/></svg>

document.getElementById("range").addEventListener("input", e => { 
  let val = e.target.value; 
  let max = 1000; 
  let lvlMax = 200; 
 
  let currentlvlProgress = val % lvlMax / lvlMax * 100; 
  let currentLvl = Math.ceil(val / lvlMax); 
  let globalProgress = val / max * 100; 
  let hue = currentLvl / (max / lvlMax) * 360; 
 
  document.getElementById("info").innerHTML = ` 
    1 уровень: <b>${lvlMax}</b> очков<br> 
    Всего уровней: <b>${max / lvlMax}</b><br> 
    Текущий уровень: <b>${currentLvl}</b><br> 
    Прогресс в уровне: <b>${currentlvlProgress}</b><br> 
    Глобальный прогресс: <b>${globalProgress}</b><br> 
    Изменение цвета: <b>${hue}</b> градусов<br> 
  `; 
 
  document.getElementById("progress").style.height = `${currentlvlProgress}%`; 
  document.getElementById("progress").style.filter = `hue-rotate(${hue}deg)`; 
});

body { 
  display: flex; 
  flex-direction: column; 
  font-size: 14px; 
} 
 
body>* { 
  margin-bottom: 5px; 
} 
 
#icon { 
  position: relative; 
  width: 40px; 
  height: 40px; 
  mask-size: 100% 100%; 
  mask-position: 0 0; 
  mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png"); 
  -webkit-mask-size: 100% 100%; 
  -webkit-mask-position: 0 0; 
  -webkit-mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png"); 
  -moz-mask-size: 100% 100%; 
  -moz-mask-position: 0 0; 
  -moz-mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png"); 
} 
 
#icon>#progress { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 0%; 
  width: 100%; 
  background-color: red; 
  z-index: 2; 
}

<div id="icon"> 
  <div id="progress"></div> 
</div> 
 
<span id="info"></span> 
 
<input type="range" max="1000" value="0" id="range">