There are few ways to animate a svg. The easiest way to animate a svg is with css. So, the first thing we will do is build the svg, then we will create a keyframe to animate the way how the svg is writed.

<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
  <path class="path" d="M10 70 L 70 70, 90 30, 110 90, 120 50, 130 70, 190 70" stroke="white" fill="transparent"></path>
</svg>

The M command from path comes from "move to", so we move to 10 left and 70 top. L comes from "line", and now we start to construct our lines.

Now we have to create our keyframe to animate the svg. 

This is the keyframe for our animation:

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

After we will add few line of css for the svg we are done with it. You can just copy/paste this code and then change the svg path to understand better how it's working. 

CSS:

svg{
  width:200px;
  height:120px;
}
.path {
  stroke-dasharray: 290;
  stroke-dashoffset: 130;
  animation: dash 1.5s 0s forwards infinite;
  stroke-width:7px;
  stroke-linecap:round;
  stroke-linejoin:round;
}

We used animation dash (our animation from keyframe), 1.5s is the the operating time of our animation, then 0s comes from 0 delay. Inifite is used to run the animation infinitely.

A little below you can see our animation how it works.