<div class="text-wrap">
  <svg viewBox="0 0 500 80">
    <pattern 
             id="p-img" 
             viewBox="0 0 300 100"
             patternUnits="userSpaceOnUse"
             width="200%" height="200%"
             x="-60%" y="-10%">
      <image xlink:href="https://68.media.tumblr.com/f6d55c4c3981fd7409a41f9e9cfa71bf/tumblr_oqy2keV1LD1uha1xeo1_400.gif" width="300" height="200"/>
    </pattern>
    <text text-anchor="middle"
          x="50%"
          y="50%"
          dy=".35em"
          class="img-layer">
      Music
    </text>
    <linearGradient id="gr-overlay" x1="0" y1="0" x2="100%" y2="100%">
      <stop stop-color="hsla(50, 100%, 70%, 0.5)" offset="10%"/>
      <stop stop-color="hsla(200, 100%, 60%, 0.5)" offset="50%"/>
      <stop stop-color="hsla(320, 100%, 50%, 0.5)" offset="90%"/>
    </linearGradient>
    <text text-anchor="middle"
          x="50%"
          y="50%"
          dy=".35em"
          class="gradient-layer">
      Music
    </text>
  </svg>
</div>

body {
	background: #1d1f20;
	padding: 50px;
  overflow: hidden;
  color: #FFF;
  * {box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
  
  .text-wrap{

    margin: 0;
    position: relative;
    width: 100%;
  
    svg {
      position: absolute;
      width: 100%;
      height: auto;
      font: bold 100px sans-serif;
      text-transform: uppercase;
      
      .img-layer {
        fill: url(#p-img);
      }
      
      .gradient-layer {
        fill: url(#gr-overlay);
      }
    }
  }
}