Moving dot on svg polyline in html-CodePudding

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.

.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;
  }
}

<!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>

CodePudding user response：

This is a really neat idea so I was playing around with it, and I've no idea why, but the majority of the jitter seems to be eliminated if you make the parameters perfect multiples of each other... ? There's really no rhyme to my reason though, so this could just be arbitrary luck, or maybe I'm just seeing some browser-specific behavior. There's still a tiny hiccup, and it does seem to occur with the same frequency as the one in your OP did, its just not nearly as dramatic.

edit - removed codepen link, no idea why but it just kept linking to the default blank codepen. My few css changes are all below, however

Not much of an answer without an explanation, I know. And there could be plenty of reasons why you cant just arbitrarily change the parameters, but alas... it was too long to post as a comment :p

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

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

CodePudding user response：

You have a stroke-dasharray creating a 10px stroke followed by a 400px gap, making a 410px long pattern that repeats over and over again. So to avoid jittering, your animation must offset that pattern by exactly 410px before starting over:

stroke-dashoffset: 410;

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="200 250 300 300">
  <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>