A Pen by Captain Anonymous.

Basic-Example-of-SVG-Line-Drawing,-Backward-and-Forward.markdown

Basic Example of SVG Line Drawing, Backward and Forward

Forked from Chris Coyier's Pen Basic Example of SVG Line Drawing, Backward and Forward.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="97.089996"
   height="95.360001"
   id="svg2">
  <defs
     id="defs4">
    <linearGradient
       id="linearGradient3865">
      <stop
         style="stop-color:#000000;stop-opacity:0;"
         offset="0"
         id="stop3867" />
      <stop
         id="stop3873"
         offset="0.5"
         style="stop-color:#000000;stop-opacity:1;" />
      <stop
         style="stop-color:#000000;stop-opacity:1;"
         offset="1"
         id="stop3869" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient3865"
       id="linearGradient3871"
       x1="251.19234"
       y1="462.43311"
       x2="356.28818"
       y2="462.43311"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(-254.99999,542.375)" />
  </defs>
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-956.99379)">
    <path
       style="fill:none;stroke:url(#linearGradient3871);stroke-width:8.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;"
       class="path"
       d="m 0.44232904,1016.6774 26.26396996,-0.2526 16.41497,-42.55262 9.21765,61.87182 11.61675,-30.4309 9.09137,11.4905 23.991134,-0.2525"
       id="path3093"/>
  </g>
</svg>

script.js

var path = document.querySelector('.path');
console.log(path.getTotalLength());

style.css

.path {
  stroke-dasharray: 205.6461944580078 ;
  stroke-dashoffset: 205.6461944580078 ;
  animation: dash 1s linear infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 205.6461944580078 ;
  }
  25% {
    stroke-dashoffset: 0;
  }
   100% {
    stroke-dashoffset: 0;
  }
}