Change start point of svg stroke animation-CodePudding

I have svg stroke animation https://codesandbox.io/s/magical-hill-r92ong

But it's starts from bottom-right position, can i start it from upper center like on screenshot (red dot) ?

I try to set stroke-dashoffset with negative value it's helps to set start point, but stroke animation is not going to the end

CodePudding user response：

As I've commented you need to rewrite the d attribute so that it starts where you want the animation to begin.

For example you may try this:

body {
  font-family: sans-serif;
}

svg path {
  animation: anim 3s ease-in-out forwards infinite;
}

@keyframes anim {
  0% {
    stroke-dasharray: 0 672;
  }
  100% {
    stroke-dasharray: 672 672;
  }
}

<svg width="218" height="196" viewBox="0 0 218 196" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M106.732 31.0933C107.743 32.8343 110.257 32.8343 111.268 31.0933C115.823 22.9236 121.557 13.3943 128.468 8.90454C136.579 3.63485 145.927 1 156.511 1C165.086 1 173.004 2.54327 180.266 5.6298C187.605 8.71634 194.017 13.1203 199.502 18.8417C205.064 24.5631 209.352 31.3007 212.365 39.0547C215.455 46.8087 217 55.3531 217 64.688C217 79.7443 212.867 94.6123 204.601 109.292C196.335 123.972 184.67 138.313 169.605 152.315
 C154.541 166.243 136.811 179.567 116.416 192.29C115.335 193.043 114.099 193.683 112.708 194.21C111.318 194.737 110.082 195 109 195C107.996 195 106.798 194.737 105.408 194.21C103.94 193.683 102.665 193.043 101.584 192.29C81.1888 179.567 63.4592 166.243 48.3948 152.315C33.3304 138.313 21.6652 123.972 13.3991 109.292C5.13304 94.6123 1 79.7443 1 64.688C1 55.3531 2.54506 46.8087 5.63519 39.0547C8.64807 31.3007 12.9356 24.5631 18.4979 18.8417C23.9828 13.1203 30.3948 8.71634 37.7339 5.6298C44.9957 2.54327 52.9142 1 61.4893 1C72.073 1 81.4206 3.63485 89.5322 8.90454C96.4432 13.3943 102.177 22.9236 106.732 31.0933Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>