<div class="wrapper"><svg  width="740" height="200">
    <defs>
        <linearGradient id="MyGradient" x1="0" y1="0" x2="100%" y2="0%"> <!--20% spreadMethod="repeat"-->
          <stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
          <stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
          <stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
          <stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
          <stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
          <stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
          <stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
          <stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
          <stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
          <stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
        </linearGradient>
      
        <pattern id="p-stripes" 
                 patternUnits="userSpaceOnUse"
                 width="200" height="200" 
                 viewbox="0 0 200 200">
          <rect width="200" height="200"
                  fill="url(#MyGradient)"/>
        </pattern>
      </defs>
  
    <text x="0" y="97%">Hello!</text>
  </svg>
  <div class="links">
    <h3>Useful links</h3>
    <a href="http://lea.verou.me/2012/05/text-masking-the-standards-way/">lea.verou.me/2012/05/text-masking-the-standards-way/</a><br />
    <a href="https://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/">tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/</a>
  </div>
</div>
@font-face {
  font-family: 'Leckerli One';
  font-style: normal;
  font-weight: 400;
  src: local('Leckerli One'), local('LeckerliOne-Regular'), url(https://themes.googleusercontent.com/static/fonts/leckerlione/v5/S2Y_iLrItTu8kIJTkS7DrKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}


HTML, BODY {
  height: 100%;
  }

BODY {
  display: flex;
  justify-content: center;  
  align-items: center;
    
  background: linear-gradient(-45deg,
    rgba(255,255,255,0) 50%,
      #EFEFEF 52.5%, 
      rgba(255,255,255,0) 55%),
    linear-gradient(45deg, 
      rgba(255,255,255,0) 50%,
      #EFEFEF 52.5%, 
      rgba(255,255,255,0) 55%);
  background-size: 1.5em 1.5em;
  background-color: #FFF;
  font-size: 10px;
  }

.wrapper {
  width: 90%;
  margin: auto;
  text-align: center;
  line-height: 1;
  }
text { 
      fill: url(#p-stripes);
      font-family: 'Leckerli One';
      font-size: 25em;
      }
// SVG {
//   border: 1px solid;
// }
// .wrapper {
//   border: 1px solid;
// }


a {
  font-style: italic;
  color: #999;
  }
H3 {
  margin-bottom: .5rem;
  font: 1.5em/1 'Leckerli One';
  color: skyblue;
  }

.links {
  margin: 3em auto 0;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.