<div class="wrapper">
  <h1>Icon filling animation <span>using SVG mask</span></h1>
  <div class="stars">
    <div class="js-figure stars__item">
      <svg xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" viewBox="0 0 150 150">
        <defs>
          <mask id="mask" x="0" y="0" width="150" height="150">
            <rect class="js-figure-fill" x="0" y="150" fill="#fff" width="150" height="150" data-percent="20"/>
          </mask>
        </defs>
        <path mask="url(#mask)" fill="#FFC107" d="M75.005,0l19.966,56.187h53.586L104.83,89.193l15.641,57.904l-45.466-34.723L29.55,147.1l15.633-57.906
      L1.443,56.188h53.591L75.005,0z"></path>
        <path fill="none" stroke="#0097A7" stroke-width="2" d="M75.005,0l19.966,56.187h53.586L104.83,89.193l15.641,57.904l-45.466-34.723L29.55,147.1l15.633-57.906
      L1.443,56.188h53.591L75.005,0z"></path>
      </svg>
    </div>

    <div class="js-figure">
      <svg xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" viewBox="0 0 150 150">
        <defs>
          <mask id="mask" x="0" y="0" width="150" height="150">
            <rect class="js-figure-fill" x="0" y="150" fill="#fff" width="150" height="150" data-percent="50"/>
          </mask>
        </defs>
        <path mask="url(#mask)" fill="#FFC107" d="M75.005,0l19.966,56.187h53.586L104.83,89.193l15.641,57.904l-45.466-34.723L29.55,147.1l15.633-57.906
      L1.443,56.188h53.591L75.005,0z"></path>
        <path fill="none" stroke="#0097A7" stroke-width="2px" d="M75.005,0l19.966,56.187h53.586L104.83,89.193l15.641,57.904l-45.466-34.723L29.55,147.1l15.633-57.906
      L1.443,56.188h53.591L75.005,0z"></path>
      </svg>
    </div>
  </div>
  <button class="js-replay btn-play">Replay</button>
</div>

/**** styling for demo purpose only ****/
body {
  display: flex;
  height: 100vh;
  background-color: #00BCD4;
  font-family: 'Montserrat', sans-serif;
  align-items: center;
  justify-content: center;
}

h1 {
  margin-bottom: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: normal;
  text-align: center;
  
  span {
    display: block;
    font-size: 15px;
  }
}

.stars {
  display: flex;
  justify-content: center;
}

.stars__item {
  margin-right: 15px;
}

.wrapper {
  text-align: center;
}

.btn-play {
  margin-top: 30px;
  padding: 10px 15px;
  transition: .3s linear;
  background-color: #0097A7;
  border: none;
  color: #fff;
  
  &:hover {
    background-color: #FFC107;
    color: #0097A7;
  }
  
  &:focus {
    outline: none;
  }
}
var fillIcons = function() {
  $('.js-figure').each(function(){
    var $this = $(this),
        $rect = $this.find($('[class~="js-figure-fill"]')),
        valY = ((100 - parseFloat($rect.attr('data-percent'))) * parseFloat($rect.attr('height')) ) / 100,
        $animationDiv = $('<div></div>');

    $animationDiv.css('top', parseFloat($rect.attr('height')));
    $animationDiv.animate(
      {
        top: valY
      },
      {
        duration: 1000,
        step: function(value, properties) {
          if (properties.prop === 'top') {
            $rect.attr('y', value);
          }
        }
      }
    );
  });
};

fillIcons();

$('.js-replay').on('click', function() {
   fillIcons();
});

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:400,700

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js