<svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="100%" height="100%" fill="#7bc8a5" />
    <defs>
        <path id="a" d="M68 18q15.8 0 27.8 7t18.8 18.2q1.4 2.2 1.4 4.8 0 3.8-3.6 6-1.6.8-3.6.8-2.2 0-4.1-1.1-1.9-1.1-3.1-3.1Q90.4 33 67.8 32.8q-16.2 0-25.6 6.8-9.4 6.8-9.4 19.4 0 23.4 37.8 28.4 24.8 3.6 37 15.2t12.2 30.6q0 14-6.8 24.2t-18.6 15.5q-11.8 5.3-26.4 5.3-19 0-33.7-8.1-14.7-8.1-21.1-21.9-.8-1.4-.8-3.2 0-2.8 2.1-4.7 2.1-1.9 5.7-1.9 2.4 0 4.5 1.3t3.1 3.7q4.6 9 15.3 14.5 10.7 5.5 24.9 5.5 16.4 0 26.4-7.9t10-22.1q0-12.6-9.3-21.2t-27.9-11Q44 98.4 30.7 86.7T17.4 58q0-12 6.5-21.1 6.5-9.1 18-14T68 18z" />
        <path id="b" d="M53.783 96.3507q.707-3.3257 3.414-4.9994 2.7072-1.6737 5.8373-1.0084 3.3257.7069 5.0202 3.3162 1.6945 2.6094.9876 5.935L39.8097 237.1218q-.6653 3.13-3.2954 4.9224t-5.9558 1.0855q-3.1301-.6654-4.9017-3.3933t-1.1062-5.858L53.783 96.3507z" />
        <g id="c">
            <use xlink:href="#a" />
            <use xlink:href="#b" />
        </g>
        <linearGradient id="d" x1="0%" x2="60%" y1="0%" y2="0%" gradientTransform="rotate(105)">
            <stop offset="0%" stop-color="#06f" />
            <stop offset="100%" stop-color="#f66" />
        </linearGradient>
        <clipPath id="e">
            <use xlink:href="#a" />
            <use xlink:href="#b" />
        </clipPath>
    </defs>
    <use fill="transparent" stroke="#000" stroke-width="9" transform="translate(60, -4)" xlink:href="#c" />
    <rect id="fade" width="100%" height="100%" fill="url(#d)" clip-path="url(#e)" transform="translate(60, -4)" />
</svg>
<br><br>
<div id="name">Seth Parrish</div>

body {
     padding-top: 20px;
     background-color: #7bc8a4;
     margin: 0;
     text-align: center;
     margin: auto;
     width: 80%;
     max-width: 600px;
     font-family: 'Pacifico', cursive;
     font-size: 35px;;
}

#name {
     font-family: Rubik, sans-serif;
     font-weight: 900;
}

 #a, #b {
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
}
 #a {
     animation: draw 5s ease-out forwards;
     animation-timing-function: ease-in-out;
}
 #b {
     animation: draw 8s ease-out forwards;
     animation-delay: 1.55s;
}
 #fade {
     opacity 1;
     animation: fade 3s ease-in;
}
 @keyframes fade {
     0% {
         opacity: 0;
    }
     20% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes draw {
     to {
         stroke-dashoffset: 0;
    }
}
 

/*
shakeit
intensifies
fontalicious
strobe
twister
*/
// setTimeout(() => document.getElementById("name").className = "intensifies", 4000)