<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)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.