svg.specialtext(xmlns='http://www.w3.org/2000/svg',version='1.1',viewBox='0 0 750 200',preserveAspectRatio='xMidYMid meet',style='height:70%;width:70%;')
  defs
    filter#texteffect
      feGaussianBlur(in='SourceGraphic',stdDeviation=4)
      feComponentTransfer
        feFuncA(type='linear',slope=1.5,intercept=0)
      feComposite(result='outer',in2='SourceGraphic',operator='out')
      feGaussianBlur(result='pre-inner',in='SourceGraphic',stdDeviation=2)
      feComposite(in='SourceGraphic',in2='pre-inner',operator='out')
      feComponentTransfer(result='inner')
        feFuncA(type='linear',slope=7.5,intercept=0)
      feMerge
        //- feMergeNode(in='SourceGraphic')
        feMergeNode(in='outer')
        feMergeNode(in='inner')
      feGaussianBlur(stdDeviation=1)
    linearGradient#gradient(color-interpolation='sRGB',spreadMethod='repeat',x1=0,x2=0.5,y1=0.02,y2=0)
      stop(stop-color='#ef50d5',offset='0%')
      stop(stop-color='#15f0f2',offset='33%')
      stop(stop-color='#f2a415',offset='66%')
      stop(stop-color='#ef50d5',offset='100%')
    mask#textMask
      g(filter='url(#texteffect)')
        rect(x=10,y=20,width=730,height=10,fill='#fff')
        rect(x=10,y=170,width=730,height=10,fill='#fff')
        text#text(x=375,y=150,text-anchor='middle',fill='#fff') MYSTIQUE
  rect#fill(mask='url(#textMask)',fill='url(#gradient)',x=0,y=0,width=4000,height=200)

@import 'https://fonts.googleapis.com/css?family=Righteous';

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #131313;
}

.specialtext {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#text {
  font-size: 150px;
  font-family: Righteous;
}

#fill {
  animation: shift 5s linear infinite;
}

@keyframes shift {
  0% { x: 0; }
  100% { x: -2000; }
}