<div id="wrap">

  <div class="heading" data-class="0">
    <div class="heading__text">
      <span class="heading-text heading-text--0">Heading text goes here</span>
      <span class="heading-text heading-text--1">Heading text #1 goes here</span>
      <span class="heading-text heading-text--2">Heading text #2 goes here</span>
      <span class="heading-text heading-text--3">Heading text #3 goes here</span>
      <span class="heading-text heading-text--4">Heading text #4 goes here</span>
      <span class="heading-text heading-text--5">Heading text #5 goes here</span>
    </div>
    <div class="heading__icon">
      <div class="heading-image heading-image--glass">
        <svg x="0px" y="0px" viewBox="0 0 67.888 101.903">
          <style type="text/css">
            .st0 {
              opacity: 0.5;
            }

            .st1 {
              fill: #E5ECF1;
              stroke: #BCBCBC;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-miterlimit: 10;
            }

            .st2 {
              opacity: 0.6;
            }

            .st3 {
              opacity: 0.4;
              fill: #C3CACF;
            }

            .st4 {
              opacity: 0.9;
              fill: #E7F3FD;
            }

            .st5 {
              fill: none;
            }

            .st6 {
              opacity: 0.5;
              fill: #B5BBBF;
            }

            .st7 {
              opacity: 0.7;
              fill: #FFFFFF;
            }

          </style>
          <g class="st0">
            <g>
              <path class="st1" d="M43.377,20.462V5.195H24.453v15.267L1.508,92.786c0,0-5.352,8.617,8.616,8.617c13.97,0,33.431,0,47.582,0
    c14.151,0,8.616-8.617,8.616-8.617L43.377,20.462z" />
            </g>
          </g>
          <g>
            <g class="st2">
              <g>
                <g>
                  <g>
                    <path class="st1" d="M46.204,2.772c0,1.255-1.019,2.272-2.271,2.272H23.957c-1.254,0-2.271-1.017-2.271-2.272l0,0
          c0-1.257,1.017-2.272,2.271-2.272h19.976C45.185,0.5,46.204,1.516,46.204,2.772L46.204,2.772z" />
                    <path class="st3" d="M43.932,0.5H23.957c-1.254,0-2.271,1.016-2.271,2.272c0,1.255,1.017,2.272,2.271,2.272h19.976
          c1.253,0,2.271-1.017,2.271-2.272C46.204,1.516,45.185,0.5,43.932,0.5z M36.801,4.026H24.232c-0.789,0-1.429-0.562-1.429-1.254
          s0.641-1.253,1.429-1.253h12.569c0.788,0,1.43,0.56,1.43,1.253S37.589,4.026,36.801,4.026z" />
                    <path class="st4" d="M26.537,2.605c0,0.41-0.332,0.742-0.742,0.742h-1.235c-0.408,0-0.742-0.332-0.742-0.742l0,0
          c0-0.409,0.333-0.74,0.742-0.74h1.235C26.205,1.865,26.537,2.196,26.537,2.605L26.537,2.605z" />
                  </g>
                  <path class="st3" d="M43.932,0.5h-3.575c0.915,0.294,1.692,0.747,1.904,1.904c0.227,1.247-0.57,2.14-1.599,2.64h3.27
        c1.253,0,2.271-1.017,2.271-2.272C46.204,1.516,45.185,0.5,43.932,0.5z" />
                </g>
              </g>
            </g>
            <path class="st3" d="M66.322,92.786L43.377,20.462V5.195H24.453v15.267L1.508,92.786c0,0-5.352,8.617,8.616,8.617
  c13.97,0,33.431,0,47.582,0C71.857,101.403,66.322,92.786,66.322,92.786z M43.044,94.915H7.777
  c-4.39-0.455-2.876-5.146-2.876-5.146L25.941,20.9V6.522l8.022-0.152v14.076l14.379,70.081
  C48.796,95.823,43.044,94.915,43.044,94.915z" />
            <g>
              <path class="st5" d="M7.777,94.915h35.267c0,0,5.752,0.908,5.298-4.388L33.963,20.446V6.37l-8.022,0.152V20.9L4.901,89.769
    C4.901,89.769,3.387,94.46,7.777,94.915z" />
              <path class="st6" d="M66.322,92.786L43.377,20.462V5.195h-4.874v14.948l20.433,72.351c0.909,5.751-5.146,5.903-5.146,5.903H6.719
    c-5.753-0.454-5.449-5.146-5.449-5.146l-0.006-0.008c-0.871,1.774-3.168,8.16,8.861,8.16c13.97,0,33.431,0,47.582,0
    C71.857,101.403,66.322,92.786,66.322,92.786z" />
            </g>
            <path class="st7" d="M26.698,7.202v14.076L7.02,87.574c0,0-1.589,3.784,1.06,4.465h9.536c0,0,5.6,0.908,6.054-3.936l6.963-66.9
  V7.126L26.698,7.202z" />
          </g>
        </svg>
      </div>
      <div class="heading-image heading-image--fill">
        <svg x="0px" y="0px" viewBox="0 0 67.888 101.903">
          <path class="st1" d="M64.76,91.99L42.306,21.695H25.267L3.073,91.99c0,0-5.095,8.202,8.2,8.202h45.286C70.028,100.192,64.76,91.99,64.76,91.99z" />
        </svg>
      </div>
    </div>
  </div>

</div>

html,
body {
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-family: monospace;
  font-size: 18px;
  color: #333;
}

#wrap {
  width: 100%;
  max-width: 980px;
  margin: auto;
  padding: 40px 0;
}

.heading {
  display: flex;
  align-items: center;

  &__text {
    flex: 1 1 100%;
    margin-right: 20px;
    line-height: 1.2;
    font-size: 24px;
  }

  &__icon {
    width: 60px;
    position: relative;
  }

  &-text {
    display: none;

    &--0 {
      display: block;
    }
  }

  &-image {
    width: 100%;

    &--glass {
      position: relative;
      z-index: 1;

      svg {
        display: block;
        width: 100%;
      }
    }

    &--fill {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;


        path {
          fill: transparent;
          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
          transition: 1s ease;
          transition-property: fill, clip-path;
        }
      }
    }
  }

  &[data-class='1'] {
    .heading {
      &-text {
        display: none;

        &--1 {
          display: block;
        }
      }

      &-image {
        &--fill {
          svg {
            path {
              fill: #333333;
              clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
            }
          }
        }
      }
    }
  }

  &[data-class='2'] {
    .heading {
      &-text {
        display: none;

        &--2 {
          display: block;
        }
      }

      &-image {
        &--fill {
          svg {
            path {
              fill: #0014ff;
              clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
            }
          }
        }
      }
    }
  }

  &[data-class='3'] {
    .heading {
      &-text {
        display: none;

        &--3 {
          display: block;
        }
      }

      &-image {
        &--fill {
          svg {
            path {
              fill: #00ad07;
              clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%);
            }
          }
        }
      }
    }
  }

  &[data-class='4'] {
    .heading {
      &-text {
        display: none;

        &--4 {
          display: block;
        }
      }

      &-image {
        &--fill {
          svg {
            path {
              fill: #ff9d00;
              clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0% 100%);
            }
          }
        }
      }
    }
  }

  &[data-class='5'] {
    .heading {
      &-text {
        display: none;

        &--5 {
          display: block;
        }
      }

      &-image {
        &--fill {
          svg {
            path {
              fill: #ff0000;
              clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%);
            }
          }
        }
      }
    }
  }
}

$(function () {

  var i = 0;

  setInterval(function () {
    i++;

    if (i > 5) {
      i = 0;
    }

    $('.heading').attr('data-class', i);
  }, 2000);

});