<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="html_structure">
<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
<path class="paths" d="M10 70 L 70 70, 90 30, 110 90, 120 50, 130 70, 190 70" stroke="white" fill="transparent"></path>
</svg>
</div>
<div class="svg-animation">
<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"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path1" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
</div>
svg{
width:200px;
height:120px;
margin-left:auto;
margin-right:auto;
display:block;
background:#1e1e1e;
}
.paths {
stroke-dasharray: 290;
stroke-dashoffset: 130;
animation: dash 1.5s 0s forwards infinite;
stroke-width:7px;
stroke-linecap:round;
stroke-linejoin:round;
}
@keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
/* second animation */
/*.path1 {*/
/* stroke-dasharray: 0;*/
/* animation: dash 5s linear;*/
/*}*/
/* 821.6 */
/*@keyframes dash {*/
/* 0% {*/
/* stroke-dasharray: 0 0 0 822;*/
/* }*/
/* 25% {*/
/* stroke-dasharray: 0 205.5 205.5 822;*/
/* }*/
/* 50% {*/
/* stroke-dasharray: 0 411 411 822;*/
/* }*/
/* 75% {*/
/* stroke-dasharray: 411 205.5 822 822;*/
/* }*/
/* 100% {*/
/* stroke-dasharray: 822 0 822 822;*/
/* }*/
/*}*/
