I want to create an svg that has one dot moving along a rectangle polyline path with a corner cut off. Right now i have something that kind of works but for some reason after a few go arounds it kind of jitters and resets. The svg's come from experimenting with creating them in Illustrator. Any help to fixing the jitter/reset is greatly appreciated.

```css
.dot {
  filter: blur(0.3px);
  stroke-dasharray: 10 400;
  animation-name: dash;
  animation-duration: 20000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

```html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="style3.css">
</head>

<body>
  <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 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:none;stroke:#010101;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  </style>
  <polyline class="st0 dot" points="353.24,507.95 387.74,507.45 387.74,283.45 223.74,283.45 224.24,445.95 "/>

  </svg>
</body>

</html>
```