Fire text

by Scott Kaye

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200" viewBox="0 0 100% 200">
    <text x="10" y="160">Fire</text>
</svg>

SCSS

svg {
    text {
        font-family: Old English Text MT;
        font-weight: 900;
        font-size: 150pt;
        fill: #08f;
        stroke: #04f;
        stroke-width: 6pt;
        stroke-dasharray: 10;
        stroke-dashoffset: 100;
        animation: draw 4s linear infinite;

		@for $i from 1 through 4 {
            &:nth-child($i) {
                animation-delay: 400ms * $i;
            }
        }
    }
	
	background: #fff;
	filter: blur(9px) contrast(6) invert(1);
}

@keyframes draw {
	50% {
		fill: #044;
	}
    to {
        stroke-dashoffset: 0;
    }
}

body {
    margin: 0;
	background: #000;
	padding: 50px;
}