HTML
<svg class="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 id="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 stop-color="#EC407A" offset="50%"></stop>
<stop stop-color="#FFF59D" offset="100%"></stop>
</linearGradient>
<filter id="txtFilt" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="40"></feGaussianBlur>
<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"></feColorMatrix>
<feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
<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"></feColorMatrix>
<feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
<feOffset dx="4" dy="4"></feOffset>
<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"></feColorMatrix>
<feMerge>
<feMergeNode in="blur"></feMergeNode>
<feMergeNode in="dropshadow"></feMergeNode>
<feMergeNode in="outline"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path id="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"></path>
</defs>
<text id="text" x="0" y="0" font-family="Yellowtail" font-size="150" fill="url(#txtGrad)" filter="url(#txtFilt)">
<textPath xlink:href="#txtCurve">
<tspan>Work Hard</tspan>
<tspan dx="-30" font-size="300">.</tspan>
</textPath>
</text>
</svg>
SCSS
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);
}
