How do I change the starting point of an SVG line animation?

Question

I am new to working with SVG and animation. I am trying to simply make an animation where a hexagon draws itself starting from the topmost point. However, the animation starts from middle right point. What is the best solution to solve this problem?

.root {
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 3px;
    stroke-dasharray: 1300px;
    stroke-dashoffset: 1300px;
    animation: move 3s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}

<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22"><defs><path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a"/></defs><use xlink:href="#a" fill-opacity="0" stroke="#61fbde"/></svg>

</div>

Answer 1

Another idea that allows you to start an animation from anywhere without redrawing the shape

Can be used for stroke-dasharray line drawing animation

Move animation start point with stroke-dashoffset

The total line length is 1232px

• Completely hidden line -stroke-dasharray = "0, 1232"

• The line is visible - stroke-dasharray =" 1232, 0 "

Therefore, for line drawing animations, it is necessary to increase the stroke length from zero to a maximum of -1232px

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,0;
    }
}

• In order to move the starting point of the animation to the top of the hexagon

  stroke-dashoffset="205.3"

.root {
  width:25%;
  height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 205.3px;
    animation: move 3s linear forwards;
}

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,0;
    }
}

<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a" />

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

Using this approach, you can start the animation from anywhere, for example, from the bottom vertex of the hexagon

Move the start point of the line animation to the bottom of the hexagon stroke-dashoffset: 821.3px;

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 821.3px;
    animation: move 3s linear forwards;
}

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,0;
    }
}

<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a" />

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

An example of drawing from a single point with two symmetrical lines

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 821.3px;
}

<div class="root">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a" >
  <animate attributeName="stroke-dasharray" dur="4s" values="0,616 0,616;0,0  1232,0" repeatCount="indefinite" />
 </path>

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

Hexagon animation example with dicsrete drawing

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 205.3px;
}

<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55  102.05z" id="a" >
    <animate
	  attributeName="stroke-dasharray"
	  dur="3s"
	  values="
	  0,1232;
	  205.3,1027;
	  410.6,822;
	  616,616;
	  822,410.6;
	  1027.3,205.3;
	  1232,0"
	  calcMode="discrete"
	  repeatCount="indefinite" />
 </path>

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

Answer 2

You will need to change the value of the d attribute so that the path begins where the animation need to begin

.root {
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 3px;
    stroke-dasharray: 1300px;
    stroke-dashoffset: 1300px;
    animation: move 3s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}

<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22"><defs><path class="shape" d="
M307.76 95.71
L485.31 197.76
v206.12
L307.76 506.94 130.2 403.88
V197.76
L307.76 95.71
z" id="a"/></defs><use xlink:href="#a" fill-opacity="0" stroke="#61fbde"/></svg>

</div>