<svg id="letter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 413.28 367.09"><defs><style>.writing{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:9px;}</style></defs><path class="writing" d="M50.5,221.5l54-54L116,154.16a59.24,59.24,0,0,0,14.35-40c-.17-7.47-.9-14.54-2.85-17.66-3.39-5.43-11-19-32-11-16,6.09-22.69,22.59-25,30.14a28.94,28.94,0,0,0-1.2,6.39l0,.35a104.09,104.09,0,0,0,.41,20.2L92.5,335.5l-8-114s56-73,64-29,10,127,21,127,42-76,42-76,24-59-3-57-24,56-24,56,6,81,21,86,36-41,36-41l17-94s-19,125-1,131,57-37,60-76,3-46,3-46l-7,166s-32,117-45,54,164-126,164-126,28-10,23-36-45,5-45,5" transform="translate(-47.32 -78.54)"/></svg>
</svg>
body {
text-align: center;
}
#letter {
height: 300px;
width: auto;
}
.writing {
stroke-dasharray: 2400;
stroke-dashoffset: 2400;
animation: writing-animation 8s linear forwards infinite;
}
@keyframes writing-animation {
to {
stroke-dashoffset: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.