JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve" preserveAspectRatio="none">
    <path class="path" fill="none" stroke="#00ff00" stroke-width="20" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" stroke-dasharray="2042 300" stroke-dashoffset="2342" />
</svg>

CSS

html, body {
    margin: 0;
    height: 100%;
}
svg {
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 5%;
    left: 5%;
}
.path {
    animation: dash 10s linear infinite;
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}