Q:

How to alternate animate polyline points?

I have managed to get animations working with polyline points, but the can't manage to "reverse" the animation so that it wouldn't be jumping back to the beginning, but instead would animate from end to beginning (example: https://codepen.io/chriscoyier/pen/bGyoz) as it's animated from beginning to end.
The points I'm using are generated in JS and then injected to HTML.
Current code: https://codepen.io/anon/pen/zgzaBR

 polyline {
        stroke-width: 1;
        stroke: black;
        fill: none;
        animation-direction: alternate;
    }
<svg>
        <polyline>
            <animate
                attributeName="points"
                dur="5s"
                from="0,17 167,-20 350,39 511,-20 757,27 891,-35 1011,11 1206,-21 1342,35 1460,-26 1566,26 1797,-32 1932,36 2161,-10 2360,15 2587,-19 2832,13 3031,-18 3197,11 3318,-31 3543,32 3655,-10 3779,31 3882,-17 4065,20 4271,-24 4416,29 4572,-26 4804,27 4983,-27 5093,24 5272,-28 5389,31 5563,-26 5766,33 5929,-15 6052,38 6282,-31 6510,15 6682,-13 6907,29 7106,-22 7282,17 7467,-31 7580,20 7763,-16 7918,18 8098,-11 8339,15 8564,-32"
                to="0,-45.6 107,39.6 278,-45.6 488,44.4 621,-28.8 761,18 975,-24 1100,18 1203,-42 1448,38.4 1563,-12 1809,32.4 1936,-16.8 2105,37.2 2299,-37.2 2450,40.8 2654,-44.4 2875,24 3034,-44.4 3273,45.6 3426,-21.6 3650,36 3792,-26.4 3988,37.2 4088,-30 4232,44.4 4444,-18 4570,15.6 4755,-22.8 4870,43.2 5077,-28.8 5231,42 5431,-15.6 5546,36 5753,-12 5860,39.6 6101,-31.2 6230,31.2 6469,-44.4 6589,37.2 6745,-26.4 6896,34.8 7039,-45.6 7152,21.6 7382,-21.6 7568,13.2 7718,-12 7949,16.8 8058,-36 8178,20.4 "
                repeatCount="indefinite"
             ></animate>
        </polyline>
    </svg>

A:

Instead of from and to you may use the values attribute. The value for the values attribute is a semicolon separated list of values. In this case use from;to;from like so:

svg {
  margin-top: 100px;
  width: 100%;
  overflow: visible;
}

polyline {
  stroke-width: 1;
  stroke: black;
  fill: none;
  animation-direction: alternate;
}

animate {
  animation-direction: alternate;
}
<svg>
  <polyline>
    <animate
             attributeName="points"
             dur="5s"
             values="0,17 167,-20 350,39 511,-20 757,27 891,-35 1011,11 1206,-21 1342,35 1460,-26 1566,26 1797,-32 1932,36 2161,-10 2360,15 2587,-19 2832,13 3031,-18 3197,11 3318,-31 3543,32 3655,-10 3779,31 3882,-17 4065,20 4271,-24 4416,29 4572,-26 4804,27 4983,-27 5093,24 5272,-28 5389,31 5563,-26 5766,33 5929,-15 6052,38 6282,-31 6510,15 6682,-13 6907,29 7106,-22 7282,17 7467,-31 7580,20 7763,-16 7918,18 8098,-11 8339,15 8564,-32;
                     0,-45.6 107,39.6 278,-45.6 488,44.4 621,-28.8 761,18 975,-24 1100,18 1203,-42 1448,38.4 1563,-12 1809,32.4 1936,-16.8 2105,37.2 2299,-37.2 2450,40.8 2654,-44.4 2875,24 3034,-44.4 3273,45.6 3426,-21.6 3650,36 3792,-26.4 3988,37.2 4088,-30 4232,44.4 4444,-18 4570,15.6 4755,-22.8 4870,43.2 5077,-28.8 5231,42 5431,-15.6 5546,36 5753,-12 5860,39.6 6101,-31.2 6230,31.2 6469,-44.4 6589,37.2 6745,-26.4 6896,34.8 7039,-45.6 7152,21.6 7382,-21.6 7568,13.2 7718,-12 7949,16.8 8058,-36 8178,20.4;
                     0,17 167,-20 350,39 511,-20 757,27 891,-35 1011,11 1206,-21 1342,35 1460,-26 1566,26 1797,-32 1932,36 2161,-10 2360,15 2587,-19 2832,13 3031,-18 3197,11 3318,-31 3543,32 3655,-10 3779,31 3882,-17 4065,20 4271,-24 4416,29 4572,-26 4804,27 4983,-27 5093,24 5272,-28 5389,31 5563,-26 5766,33 5929,-15 6052,38 6282,-31 6510,15 6682,-13 6907,29 7106,-22 7282,17 7467,-31 7580,20 7763,-16 7918,18 8098,-11 8339,15 8564,-32"
             repeatCount="indefinite"
             ></animate>
  </polyline>
</svg>

