svg.texteffect(xmlns='http://www.w3.org/2000/svg',version='1.1',viewBox='0 0 850 550',preserveAspectRatio='xMidYMid meet',style='height:80%;width:80%;')
  defs
    linearGradient#txtGrad(color-interpolation='sRGB',spreadMethod='pad',x1=1,y1=-0.2,x2=0.9,y2=1.2)
      stop(stop-color='#8E24AA',offset='0%')
      stop(stop-color='#EC407A',offset='50%')
      stop(stop-color='#FFF59D',offset='100%')
    filter#txtFilt(color-interpolation-filters='sRGB')
      feGaussianBlur(in='SourceGraphic',stdDeviation=40)
      feColorMatrix(result='blur',type='matrix',values='0.9 0 0 1 0  0 0.9 0 0.9297 0  0 0 0.9 0.3438 0  0 0 0 0.6 0')
      feGaussianBlur(in='SourceGraphic',stdDeviation=2)
      feColorMatrix(result='outline',type='matrix',values='0 0 0 32 0  0 0 0 32 0  0 0 0 32 0  0 0 0 16 0')
      feGaussianBlur(in='SourceGraphic',stdDeviation=2)
      feOffset(dx=4,dy=4)
      feColorMatrix(result='dropshadow',type='matrix',values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 16 0')
      feMerge
        feMergeNode(in='blur')
        feMergeNode(in='dropshadow')
        feMergeNode(in='outline')
        feMergeNode(in='SourceGraphic')
    path#txtCurve(d='M60,220C240,150,560,125,740,195M120,360C260,290,550,270,730,315M170,460C340,390,540,420,720,490',fill='none',stroke='red')
  text#text(x=0,y=0,font-family='Yellowtail',font-size='150',fill='url(#txtGrad)',filter='url(#txtFilt)')
    textPath(xlink:href='#txtCurve')
      tspan Remember to take care of yourself
      tspan(dx='-30',font-size='300') !
  

html, body {
  width: 100%;
  height: 100%;
}
body {
  overflow: hidden;
  background: #131313;
  perspective: 1000px;
}
.texteffect {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, -100px) scaleY(0.8) rotateX(7deg) rotateY(-30deg);
}