"svg stroke animation"
Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY

<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;*/ /* }*/ /*}*/

Related: See More


Questions / Comments: