JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div class="anim2">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2100px" height="100px" viewBox="-165.181 0 2100 100" enable-background="new -165.181 0 2100 100" xml:space="preserve">

			<path class="path" fill="none" stroke="#fb3434" stroke-width="2.5" stroke-miterlimit="5" stroke-dasharray="9,10" d="M1949.868,82.271
				c-36.542-23.309-91.211-33.333-124.966-34.266c-58.243-1.611-155.138,43.139-213.91,40.945
				c-103.471-3.865-171.647-59.992-353.768-66.538c-181.218-6.513-232.065,54.538-376.104,58.903
				c-144.039,4.36-274.103-64.355-377.297-64.355c-102.117,0-189.47,33.998-248.305,58.9
				c-44.443,18.812-118.075,18.339-205.439,2.225C-12.095,66.617-79.904,42.449-83.35,41.49c0,0-129.725-28.722-128.666,94.823
				c1.059,123.545,356.601,35.551,855.423,122.578c498.821,87.028,644.975-9.994,851.495-26.111
				c206.518-16.117,362.199-96.697,422.568-48.348C1977.837,232.779,2009.317,120.191,1949.868,82.271z"></path>

	</svg>
</div>


<div class="anim1">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2100px" height="100px" viewBox="-165.181 0 2100 100" enable-background="new -165.181 0 2100 100" xml:space="preserve">

			<path class="path" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-miterlimit="5" stroke-dasharray="9,10"...

CSS

body {
    background: #000;
}

svg {
    margin-left: -140px;
    margin-top: 0;
}

.anim1 .path {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    -webkit-animation: dash-right 30s linear infinite;
    animation: dash-right 30s linear infinite;
}

.anim2 .path {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    -webkit-animation: dash-left 30s linear infinite;
    animation: dash-left 30s linear infinite;
}

@-webkit-keyframes dash-left {
    from {
        stroke-dashoffset: 1000
    }
    
    to {
        stroke-dashoffset: 0
    }
}

@keyframes dash-left {
    from {
        stroke-dashoffset: 1000
    }
    
    to {
        stroke-dashoffset: 0
    }
}

@-webkit-keyframes dash-right {
    from {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: 1000
    }
}

@keyframes dash-right {
    from {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: 1000
    }
}