<svg width="40" viewBox="0 0 80 295" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      path {
        transform-box: fill-box;
        transform-origin: center
      }
    </style>
    <mask id="mask">
      <rect fill="#000" width="100%" height="100%" />
      <path d="m21.899 35.881v-10.569l-4.5315-6.8381s0.05568-7.3097-0.08304-11.593c0 0 0.46519-2.7375 1.1696-2.9244 10.338-2.7447 35.989-2.4384 46.121 0.088662 1.2943 0.32287 0.80594 1.7481 0.88333 2.7475 0.28453 3.6959-0.39263 11.622-0.39263 11.622l-3.2955 6.5908v10.851c5.4519 10.978 9.0848 24.319 11.864 34.625l4.284 25.351c0.72845 70.773 0.05892 129.19-0.17502 191.35l-4.6541 6.3009-61.794 0.27288-7.1934-5.1197 0.98862-192.78c0.85373-12.272 1.6298-18.172 3.2982-25.398 3.6199-11.842 8.8226-23.132 13.512-34.579z" fill="#fff" transform="rotate(180)" />
    </mask>
  </defs>
  <path d="m21.899 35.881v-10.569l-4.5315-6.8381s0.05568-7.3097-0.08304-11.593c0 0 0.46519-2.7375 1.1696-2.9244 10.338-2.7447 35.989-2.4384 46.121 0.088662 1.2943 0.32287 0.80594 1.7481 0.88333 2.7475 0.28453 3.6959-0.39263 11.622-0.39263 11.622l-3.2955 6.5908v10.851c5.4519 10.978 9.0848 24.319 11.864 34.625l4.284 25.351c0.72845 70.773 0.05892 129.19-0.17502 191.35l-4.6541 6.3009-61.794 0.27288-7.1934-5.1197 0.98862-192.78c0.85373-12.272 1.6298-18.172 3.2982-25.398 3.6199-11.842 8.8226-23.132 13.512-34.579z" fill="#ccc" transform="rotate(180)" />

  <rect fill="#27AE60" width="100%" height="5%" mask="url(#mask)" y="0" id="rect" />

</svg>
<br>
<input type="range" min="5" max="100" value="5" id="range">

svg {
  display: block;
  transform: scaleY(-1);
}

range.oninput = _change;

function _change() {
  rect.style.height = this.value + "%";
}