Basic Example of SVG Line Drawing, Backward and Forward

basic-example-of-svg-line-drawing-backward-and-forward.markdown

Basic Example of SVG Line Drawing, Backward and Forward

A Pen by Tom Yufu on CodePen.

License.

index.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"
	 viewBox="0 0 1158.38 726.5" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" fill="#ffffff" stroke="#000000" stroke-width="7" stroke-miterlimit="8" d="M162.17,138.63c-17.15-.41-28,23.44-15.25,35.59,6.2,5.91,15.69,5.9,23,2.07C178,172,182.22,164.15,181,155.16l-8.82,6.77a553.93,553.93,0,0,1,66,55.87c5,5,12.3-1.29,9.42-7.27l-7.33-15.27-.94,7.27,14.86-15.65c4.14-4.36,8.07-9.42,13.11-12.79,1.95-1.3,8-5.27,10.07-2.48,2.72,3.61-5.11,9.86-7.34,11.7-2.69,2.2-1.87,6.17,0,8.48,4.23,5.25,6.71,13,4.18,19.54-1.93,5-7.13,9.33-12.69,9.09a9.82,9.82,0,0,1-9-9.82c.27-6.21,9-9.7,13.66-12.07,12.13-6.14,28.47-10.36,39.94-.49,8,6.91,7.79,22.35-4.33,24.46L305,234.07a124.13,124.13,0,0,1,39.53-2.24c6.78.68,8.07-10.19,1.59-11.78-2.84-.7-5.47-2.62-5.86-5.77l-7.59,5.79A73.89,73.89,0,0,1,371.68,246c4.18,5.29,13.44-1.76,9.42-7.28l-6.29-8.64-2.16,8.21c3.43-2.17,9.07-1.34,10.69,2.87l10-5.84c-3.65-3.59-4.08-11.72,1.78-13.48,5-1.49,11.36,3,8.29,8.35-3.2,5.53-9.16,3.79-10.54-1.76-1.26-5.07.33-10.89,3.27-15.1,8.52-12.2,25.62-17.56,39.67-13.18s24.49,18.35,24.86,32.94c.41,15.88-9.44,29.4-20.55,39.78-12.09,11.29-27.48,22.11-43.48,26.77-15.44,4.49-33.56,1.27-41-14.45-7.24-15.36-10.38-36.5-4.11-52.6,5.75-14.79,21.89-26.7,37.73-18.77,6.33,3.17,10.38,9.26,9.54,16.46-.75,6.38-4.71,12-11.12,13.46-4.12.92-5.09,5.5-3.59,8.82,4.79,10.6,20.56,18.53,30,8.55,7.35-7.8,5.44-21.27-4.95-25l-1.6,11.79c13.84.82,26.09-11.43,25.31-25.26l-10.24,4.24,12.7,15.74c1.66,2,5.14,2.16,7.28.94a359.76,359.76,0,0,1,68.23-30.25,346.06,346.06,0,0,1,37-9.8c10.45-2.14,23.9-3.92,32,4.78,6.08,6.51,3.83,14.63-2.65,19.76s-15.87,7.85-24.19,7.43c-4.8-.24-18.2-3.51-15-10.84,1.69-3.87,6.68-6.86,10.19-8.85a44.07,44.07,0,0,1,13.73-4.87,46.31,46.31,0,0,1,29.58,4.37,36.74,36.74,0,0,1,11.77,9.38c1.61,2,3.74,5.39,3,8.15-.26,1-1.89,3.64-3.2,3.05l-4.63,11c8.31,2.93,17.9,6.15,23.43,13.46,3.6,4.77,4.29,13.41-.79,17.61-6.28,5.2-17.49-5.84-22.07-9.66-7.53-6.29-14.59-13.47-19.37-22.1-8.48-15.3-4.4-32.69,11.83-40.32,14.76-6.95,32.12-4.43,45.93,3.46a66.75,66.75,0,0,1,32.7,47.5l10-5.83c-15.39-16.43-19.27-40.79-10.73-61.45l-11,1.43a731,731,0,0,1,38.37,64.86c3.17,6.06,12.83,1.88,11-4.62l-3.42-11.95-11,4.63c4.36,6.45,13,17.91,7.89,26-2.76,4.35-12.24,7.59-10.76-.8,1.43-8.06,10.46-14,16.52-18.59,6.46-4.87,13.2-9.51,19-15.21,5.44-5.39,10-11.92,11.91-19.44,2.4-9.59-1.71-20.55,2.43-29.63,5.83-12.8,23.75-15.72,35.91-12,19.53,6,31.24,27,40.9,43.4l8.21-8.21a32.3,32.3,0,0,1-13-31.3l-10,2.65a157.15,157.15,0,0,1,22.38,24,155,155,0,0,1,9.5,14.31c2.39,4,6.89,10.07,5.24,15-2.68,8.05-16.67,8.64-23.39,8.85a82.84,82.84,0,0,1-33.77-6.28l4.19,4.2c-2.21-9,4.83-18.11,9.26-25.43,4.76-7.88,9.69-15.66,15-23.18,10.49-14.8,22.79-28.83,37.8-39.19,14.42-10,31.3-17,49-17.38,7.46-.18,15.21.82,21.93,4.24,7.45,3.78,10.34,9.19,13.22,16.69,1.67,4.35,3.78,8.15,7.47,11.09,2.62,2.07,6.27,3.5,7.84,6.59,2.52,4.93-.08,12.45-5.44,14.16-6.43,2.06-5.27,11.56,1.6,11.79A32.69,32.69,0,0,0,967.89,191a5.91,5.91,0,0,0,1.54-5.83l-2.87-9-8.81,6.78a42.34,42.34,0,0,1,17.28,34l9-5.18c-4.51-2.27-6.37-6.15-5.78-11.12l-4.41,5.79,8.57-2.53c7.39-2.19,4.24-13.77-3.19-11.57l-8.57,2.53c-2.79.82-4.08,3.07-4.4,5.78A21.58,21.58,0,0,0,978,222.13c4,2,9.06-.42,9-5.19a54.94,54.94,0,0,0-23.23-44.38c-4.27-3.08-10.32,2-8.81,6.77l2.87,9,1.55-5.84a20.47,20.47,0,0,1-15.24,5.59l1.59,11.78c11.5-3.67,17.71-16.71,14.14-28.16-2.16-6.9-7.27-9.18-12.37-13.54-2.79-2.39-3.59-6-4.83-9.29a36.57,36.57,0,0,0-5.53-10.13c-8.58-10.71-23.09-14.91-36.33-15.23-16.13-.38-32.11,4.31-46.3,11.74-29.67,15.53-50.25,43.06-67.37,71-4.44,7.24-9.49,14.65-11.91,22.87a27.41,27.41,0,0,0-1,11.45c.71,5.09,2.66,6.7,7.29,8.46,15.31,5.82,33.69,7.88,49.72,3.89,6.81-1.7,14-5.24,17.79-11.44,5-8.21,1.9-17.18-2.37-24.94a165.75,165.75,0,0,0-35.89-44.41c-3.06-2.7-9.2-2.14-10,2.64a44.88,44.88,0,0,0,18.55,44.85c5.07,3.56,11.1-3.3,8.21-8.21-11.31-19.22-24.65-40.89-46.93-48.54-17.09-5.87-40.34-.81-49.82,15.65a32.32,32.32,0,0,0-4,14.25c-.44,7,1.3,14.11-.74,20.95-2.74,9.22-11.11,15.79-18.46,21.35-7.9,6-16.83,11.63-23,19.56-6.48,8.38-9.83,22.09.51,29.15,9.15,6.25,21.81.3,26.85-8.48,7.21-12.54-1.12-27.15-8.19-37.6-3.67-5.43-12.92-2.22-11,4.62l3.43,12,11-4.62a731,731,0,0,0-38.37-64.86c-3.07-4.63-9-3.31-11,1.43-10.16,24.57-4.26,53.84,13.82,73.12,4.48,4.79,10.88-.4,10-5.84-3.58-22.76-18.25-43.28-38.21-54.67-18.63-10.64-43.08-13-61.9-1.36-20.5,12.71-23,37.73-10.73,57.27,6.8,10.87,16.36,19.69,26.57,27.3,9.09,6.77,21.15,13.57,31.37,4.93,8.37-7.06,10.1-20.52,5.21-30-6.27-12.18-20.22-17.51-32.35-21.78-6.33-2.23-10.84,8.16-4.62,11a14.31,14.31,0,0,0,16.89-3.27c5.11-5.38,5.4-13,2.48-19.54-5.35-12-18.7-20-31-23.23A59.15,59.15,0,0,0,547,203c-10.63,4.63-24.75,14.87-20.82,28.27,3.48,11.88,19,16.61,30,16.15,11.83-.5,24.93-5,32.89-14.16,8.6-9.88,8.54-24-.68-33.51-11.52-11.91-28.77-10.93-43.7-7.86a367.11,367.11,0,0,0-108.06,41.25l7.27.94-12.71-15.73c-3.26-4-10.52-.71-10.24,4.24a12.45,12.45,0,0,1-13.31,13.26c-7.13-.43-7.61,9.6-1.59,11.78,1,.37.82,4.3-.86,5.46-4.24,2.94-9.2-3.47-10.62-6.6l-3.58,8.81c19.61-4.37,25.84-30.45,13.32-44.91-14.39-16.63-40.7-13-54.35,2.37-17,19.19-15.51,46.59-8.07,69.55,3.71,11.45,10.06,21.41,21.23,26.72,10.17,4.83,21.7,5.59,32.64,3.23,12.36-2.67,23.67-9.11,34.05-16.11,9.39-6.32,18.43-13.48,25.9-22,14.77-16.89,22.43-39.45,12.13-60.68a47.48,47.48,0,0,0-53.89-25.38c-18.65,4.6-36.93,21.79-32.79,42.48,2,10.26,11.9,17.8,22.39,14.24,11-3.73,16.69-17.69,9.56-27.34-6.41-8.68-20.32-10.77-28.38-3.12-8.27,7.86-7.72,21.65.21,29.47,4,3.93,12.27,0,10-5.84-4.29-11.15-17.82-16.68-28.31-10-2.53,1.6-4.12,5.51-2.16,8.21l6.3,8.64,9.43-7.27a84.52,84.52,0,0,0-44.36-29c-3.38-.91-8.09,1.81-7.6,5.78,1,8.43,6.2,15.26,14.67,17.34l1.6-11.79a134.53,134.53,0,0,0-42.72,2.67c-7.62,1.69-4.31,12.87,3.19,11.57,14.8-2.58,22.49-20.47,17.14-33.77-6.43-16-24.84-22-40.74-19.52-9.61,1.51-18.85,5.69-27.18,10.61-6.78,4-13,9.7-13.61,18-1.24,16.34,16,27.19,30.51,21,19.67-8.39,19.29-32.41,7.44-47.11v8.48c6.12-5,12.42-12.56,11.05-21.07a14.23,14.23,0,0,0-15.71-11.83c-7.49.72-14.37,5.34-19.6,10.52-8,8-15.63,16.43-23.42,24.64a6.23,6.23,0,0,0-.93,7.27l7.33,15.27,9.43-7.28a574,574,0,0,0-68.42-57.74c-4.82-3.47-9.43,2.26-8.81,6.78.87,6.41-10.65,11.82-14.78,6.62s1.26-14.49,7.52-14.34c7.72.18,7.72-11.82,0-12Z" /></svg>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 4000;
  animation: dash 12s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}