SVG Text Masking Animation

Masking animation using css & svg

HTML

<svg>     
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M144,3.8V0c0,0-16.5,0.8-22.6,1.4c0,0-34.4,2.5-36,2.9
	c0,0-3.2-0.5-5.3,0.5c0,0,2.3,0.8-6.2,1c0,0-5.6,1.1-7.2,1.9c0,0-8-0.2-11,1c0,0-1.4,0.9-4.3,0c0,0-6.1,0.5-8.2,1.4c0,0-1.9-1-5.8,1
	c0,0-3.2,1.4-4.8-0.5c0,0-4.3,0.1-8.6,1.9c0,0-20,4-20.6,6.2c0,0-0.1,2.5-3.4,3.8v54.7h144v-23c0,0-2.3-0.6-2.4-2.4
	c-0.1-1.8-15.8-7-18.2-7.2l-12.5-6.2c0,0-1.9-2.5-4.8-1.9c0,0-4.5-2.5-6.2-1c0,0-3.8-2.2-4.8-1.9c0,0-1-3.2-6.7-2.4
	c0,0-7.1-4-4.3-11.5c0,0,1.9-3.4,8.6-3.4c0,0,4.3-3.1,5.3-3.8c0,0,9.9-1.7,13-3.8C110.9,8.6,134.9,4.7,144,3.8z"/>
        
        
        <pattern id="pattern" width="100%" height="100%" >
            <image id="text-bg" y="-1000" xlink:href="http://shishirmorshed.github.io/cloud-resources/images/external/ghashful.jpg" width="2048" height="1365">   
            </image>
        </pattern>
      </svg>

CSS

.wrapper {
    font: bold italic 7em/1.5 Georgia;
    width: 100%;
    height: 150px;
    background: #f6f6f6;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
}

svg {
    width: 100%;
    height: 100%;
}

path {
  text-anchor:middle;
  fill: url(#pattern);
}