CodePen

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"
	 width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" 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>
            
          
!

CSS

            
              .path {
  stroke-dasharray: 0 1000;
  /*stroke-dashoffset: 1000; /* NOT NEEDED */
  animation: dash 5s linear 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  from {
    stroke-dasharray: 0 1000; /* zero-length stroke, 
                                 1000-length gap */
  }
  to {
    stroke-dasharray: 1000 0;/* 1000-length stroke, 
                                 zero-length gap */
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* http://css-tricks.com/svg-line-animation-works/#comment-1212142 */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................