svg stroke

by Kim Ara

HTML

<div id="svgWrap">

		<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
			 y="0px" width="100%" height="100%" viewBox="0 0 824.514 418.25" enable-background="new 0 0 824.514 418.25"
			 xml:space="preserve">
			<style type="text/css">
				 .st0{fill:#fff;stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; }
			</style>
			<g>
			<path class="st0"...

CSS

*{margin:0;padding:0}
body{background:#00d5ff;width:100%;height:100vh}
#svgWrap{width:30%;position:absolute;top:45%;left:50%;transform:translate(-50% , -50%);}
path{fill:#fff;stroke:#fff; stroke-dasharray:6000;opacity:10;animation:animate 3s cubic-bezier(0,0.23,1,.1)}
@keyframes animate{
	0% {
		opacity :0;
		fill:none;
		stroke-dashoffset:6000;		
	}

	30%{
		opacity :10;
		fill:none;
		stroke-dashoffset:6000;	
	}

	90%{
		fill:rgba(255,255,255,0);
	}

	100%{
		opacity:10;
		fill:rgba(255,255,255,1);
		stroke-dashoffset:0;	
	}
}