Change start point of svg stroke animation

Question

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

herrstrietzel · Accepted Answer

Shift `M` (starting point)

Shifting the starting point is actually not too complicated – provided you're using absolute commands and your path doesn't contain any shorthand commands (more details below):

The upper center command would be the 16nth or 17nth command:

/**
* 1st chunk - becomes 2nd 
* M will be replaced by 
* last C command end coordinates in this chunk 
*/
M 169.605 152.315
C 154.541 166.243 136.811 179.567 116.416 192.29
C 115.335 193.043 114.099 193.683 112.708 194.21
C 111.318 194.737 110.082 195 109 195
C 107.996 195 106.798 194.737 105.408 194.21
C 103.94 193.683 102.665 193.043 101.584 192.29
C 81.189 179.567 63.459 166.243 48.395 152.315
C 33.33 138.313 21.665 123.972 13.399 109.292
C 5.133 94.612 1 79.744 1 64.688
C 1 55.353 2.545 46.809 5.635 39.055
C 8.648 31.301 12.936 24.563 18.498 18.842
C 23.983 13.12 30.395 8.716 37.734 5.63
C 44.996 2.543 52.914 1 61.489 1
C 72.073 1 81.421 3.635 89.532 8.905
C 96.443 13.394 102.177 22.924 106.732 31.093
C 107.743 32.834 110.257 32.834    111.268 31.093

/**
* 2nd chunk - new M: 111.268 31.093 = previous C command end point
*/
C 115.823 22.924 121.557 13.394 128.468 8.905
C 136.579 3.635 145.927 1 156.511 1
C 165.086 1 173.004 2.543 180.266 5.63
C 187.605 8.716 194.017 13.12 199.502 18.842
C 205.064 24.563 209.352 31.301 212.365 39.055
C 215.455 46.809 217 55.353 217 64.688
C 217 79.744 212.867 94.612 204.601 109.292
C 196.335 123.972 184.67 138.313 169.605 152.315

/** append to final path data */
Z

Reordered path

M 111.268 31.093

C 115.823 22.924 121.557 13.394 128.468 8.905
C 136.579 3.635 145.927 1 156.511 1
C 165.086 1 173.004 2.543 180.266 5.63
C 187.605 8.716 194.017 13.12 199.502 18.842
C 205.064 24.563 209.352 31.301 212.365 39.055
C 215.455 46.809 217 55.353 217 64.688
C 217 79.744 212.867 94.612 204.601 109.292
C 196.335 123.972 184.67 138.313 169.605 152.315

C 154.541 166.243 136.811 179.567 116.416 192.29
C 115.335 193.043 114.099 193.683 112.708 194.21
C 111.318 194.737 110.082 195 109 195
C 107.996 195 106.798 194.737 105.408 194.21
C 103.94 193.683 102.665 193.043 101.584 192.29
C 81.189 179.567 63.459 166.243 48.395 152.315
C 33.33 138.313 21.665 123.972 13.399 109.292
C 5.133 94.612 1 79.744 1 64.688
C 1 55.353 2.545 46.809 5.635 39.055
C 8.648 31.301 12.936 24.563 18.498 18.842
C 23.983 13.12 30.395 8.716 37.734 5.63
C 44.996 2.543 52.914 1 61.489 1
C 72.073 1 81.421 3.635 89.532 8.905
C 96.443 13.394 102.177 22.924 106.732 31.093
C 107.743 32.834 110.257 32.834 111.268 31.093

Z

However, this approach won't work if your path contains relative (lowercase commands) or shorthand commands such as H, V (horizontal/vertical linetos ), S (cubic curveto), T (quadratic bézier curves).

JS aproach 1: Shift starting points using `getPathData()` (polyfilled)

getPathData() and setPathData() methods are based the w3c working draft of the SVG Paths specification to provide a standardized way of parsing d attributes to an array of commands as well as applying the manipulated data once again via svgelement.setPathData(pathData) – so it's "kinda official" (as a successor/replacement for pathSegList())

Still (2023) not natively supported by major browsers you can use Jarek Foksa's polyfill

let pathData = path.getPathData({normalize:true});

inputShift.setAttribute('max', pathData.length-1);

inputShift.addEventListener("input", (e) => {
  let off = +e.currentTarget.value;
  if(off>=pathData.length-1){
    off=0;
    inputShift.value=off;
  }else if(off==0 ){
    off=pathData.length-1;
    inputShift.value=off;
  }
  let pathDataShift = roundPathData(shiftSvgStartingPoint(pathData, off), 3);
  
  path.setPathData(pathDataShift);
  svgOut.value = path.getAttribute("d");
});


/**
 * shift starting point
 */
function shiftSvgStartingPoint(pathData, offset) {
  let pathDataL = pathData.length;
  let newStartIndex = 0;
  if (offset == 0) {
    return pathData;
  }
  
  //exclude Z/z (closepath) command if present
  let lastCommand = pathData[pathDataL - 1]["type"];
  let trimRight = lastCommand.toLowerCase() == "z" ? 1 : 0;
 

  // M start offset
  newStartIndex =
    offset + 1 < pathData.length - 1
      ? offset + 1
      : pathData.length - 1 - trimRight;

  // slice array to reorder
  let pathDataStart = pathData.slice(newStartIndex);
  let pathDataEnd = pathData.slice(0, newStartIndex);

  // remove original M
  pathDataEnd.shift();
  let pathDataEndL = pathDataEnd.length;

  let pathDataEndLastValues = pathDataEnd[pathDataEndL - 1]["values"];
  let pathDataEndLastXY = [
    pathDataEndLastValues[pathDataEndLastValues.length - 2],
    pathDataEndLastValues[pathDataEndLastValues.length - 1]
  ];

  //remove z(close path) from original pathdata array
  if (trimRight) {
    pathDataStart.pop();
    pathDataEnd.push({
      type: "Z",
      values: []
    });
  }
  // prepend new M command and concatenate array chunks
  pathData = [
    {
      type: "M",
      values: pathDataEndLastXY
    }
  ]
    .concat(pathDataStart)
    .concat(pathDataEnd);

  return pathData;
}

// just rounding to prevent awful floating point values
function roundPathData(pathData, decimals = -1) {
    pathData.forEach((com, c) => {
        if (decimals >= 0) {
            com.values.forEach((val, v) => {
                pathData[c].values[v] = +val.toFixed(decimals);
            });
        }
    });
    return pathData;
}

svg{
  width:20em;
  overflow:visible;
}

#path {
    marker-start: url(#markerStart);
    marker-mid: url(#markerRound);
    stroke-width: 0.33%;
}

textarea{
  display:block;
  width:100%;
  min-height:30em;
}

Shift starting point 


Output

How it works

parse the d attribute to an array of commands
convert them to absolute coordinates via getPathData({normalize:true})

this option also converts shorthands like v,h,s and quadratic commands to cubic q, t as well as arcto commands a! So it's a rather "aggresive/lossy" conversion.

basically just splitting the pathData to array chunks and sorting (with the aforementioned changes for new preceeding M commands)

JS aproach 2: Retain `Q`, `A` commands (also based on `getPathdata()`)

In this case you'll need a more advanced normalizing.

convert to all absolute command coordinates
normalize shorthand commands to their longhand counterpart such as s => c, t => q, v, h => l

let pathData = pathDataToLonghands(path.getPathData());
inputShift.setAttribute('max', pathData.length - 1);

inputShift.addEventListener("input", (e) => {
  let off = +e.currentTarget.value;
  if (off >= pathData.length - 1) {
    off = 0;
    inputShift.value = off;
  } else if (off == 0) {
    off = pathData.length - 1;
    inputShift.value = off;
  }
  let pathDataShift = shiftSvgStartingPoint(pathData, off);
  pathDataShift = roundPathData(pathDataShift, 3)
  path.setPathData(pathDataShift);
  svgOut.value = path.getAttribute("d");
});


/**
 * shift starting point
 */
function shiftSvgStartingPoint(pathData, offset) {
  let pathDataL = pathData.length;
  let newStartIndex = 0;
  if (offset == 0) {
    return pathData;
  }

  //exclude Z/z (closepath) command if present
  let lastCommand = pathData[pathDataL - 1]["type"];
  let trimRight = lastCommand.toLowerCase() == "z" ? 1 : 0;


  // M start offset
  newStartIndex =
    offset + 1 < pathData.length - 1 ?
    offset + 1 :
    pathData.length - 1 - trimRight;

  // slice array to reorder
  let pathDataStart = pathData.slice(newStartIndex);
  let pathDataEnd = pathData.slice(0, newStartIndex);

  // remove original M
  pathDataEnd.shift();
  let pathDataEndL = pathDataEnd.length;

  let pathDataEndLastValues = pathDataEnd[pathDataEndL - 1]["values"];
  let pathDataEndLastXY = [
    pathDataEndLastValues[pathDataEndLastValues.length - 2],
    pathDataEndLastValues[pathDataEndLastValues.length - 1]
  ];

  //remove z(close path) from original pathdata array
  if (trimRight) {
    pathDataStart.pop();
    pathDataEnd.push({
      type: "Z",
      values: []
    });
  }
  // prepend new M command and concatenate array chunks
  pathData = [{
      type: "M",
      values: pathDataEndLastXY
    }]
    .concat(pathDataStart)
    .concat(pathDataEnd);

  return pathData;
}

/**
 * decompose/convert shorthands to "longhand" commands:
 * H, V, S, T => L, L, C, Q
 * reversed method: pathDataToShorthands()
 */
function pathDataToLonghands(pathData) {
  pathData = pathDataToAbsolute(pathData);
  let pathDataLonghand = [];
  let comPrev = {
    type: "M",
    values: pathData[0].values
  };
  pathDataLonghand.push(comPrev);

  for (let i = 1; i < pathData.length; i++) {
    let com = pathData[i];
    let type = com.type;
    let values = com.values;
    let valuesL = values.length;
    let valuesPrev = comPrev.values;
    let valuesPrevL = valuesPrev.length;
    let [x, y] = [values[valuesL - 2], values[valuesL - 1]];
    let cp1X, cp1Y, cpN1X, cpN1Y, cpN2X, cpN2Y, cp2X, cp2Y;
    let [prevX, prevY] = [
      valuesPrev[valuesPrevL - 2],
      valuesPrev[valuesPrevL - 1]
    ];
    switch (type) {
      case "H":
        comPrev = {
          type: "L",
          values: [values[0], prevY]
        };
        break;
      case "V":
        comPrev = {
          type: "L",
          values: [prevX, values[0]]
        };
        break;
      case "T":
        [cp1X, cp1Y] = [valuesPrev[0], valuesPrev[1]];
        [prevX, prevY] = [
          valuesPrev[valuesPrevL - 2],
          valuesPrev[valuesPrevL - 1]
        ];
        // new control point
        cpN1X = prevX + (prevX - cp1X);
        cpN1Y = prevY + (prevY - cp1Y);
        comPrev = {
          type: "Q",
          values: [cpN1X, cpN1Y, x, y]
        };
        break;
      case "S":
        [cp1X, cp1Y] = [valuesPrev[0], valuesPrev[1]];
        [cp2X, cp2Y] =
        valuesPrevL > 2 ? [valuesPrev[2], valuesPrev[3]] : [valuesPrev[0], valuesPrev[1]];
        [prevX, prevY] = [
          valuesPrev[valuesPrevL - 2],
          valuesPrev[valuesPrevL - 1]
        ];
        // new control points
        cpN1X = 2 * prevX - cp2X;
        cpN1Y = 2 * prevY - cp2Y;
        cpN2X = values[0];
        cpN2Y = values[1];
        comPrev = {
          type: "C",
          values: [cpN1X, cpN1Y, cpN2X, cpN2Y, x, y]
        };

        break;
      default:
        comPrev = {
          type: type,
          values: values
        };
    }
    pathDataLonghand.push(comPrev);
  }
  return pathDataLonghand;
}


/**
 * This is just a port of Dmitry Baranovskiy's 
 * pathToRelative/Absolute methods used in snap.svg
 * https://github.com/adobe-webplatform/Snap.svg/
 */
function pathDataToAbsolute(pathData, decimals = -1) {
  let M = pathData[0].values;
  let x = M[0],
    y = M[1],
    mx = x,
    my = y;
  // loop through commands
  for (let i = 1; i < pathData.length; i++) {
    let cmd = pathData[i];
    let type = cmd.type;
    let typeAbs = type.toUpperCase();
    let values = cmd.values;

    if (type != typeAbs) {
      type = typeAbs;
      cmd.type = type;
      // check current command types
      switch (typeAbs) {
        case "A":
          values[5] = +(values[5] + x);
          values[6] = +(values[6] + y);
          break;

        case "V":
          values[0] = +(values[0] + y);
          break;

        case "H":
          values[0] = +(values[0] + x);
          break;

        case "M":
          mx = +values[0] + x;
          my = +values[1] + y;

        default:
          // other commands
          if (values.length) {
            for (let v = 0; v < values.length; v++) {
              // even value indices are y coordinates
              values[v] = values[v] + (v % 2 ? y : x);
            }
          }
      }
    }
    // is already absolute
    let vLen = values.length;
    switch (type) {
      case "Z":
        x = +mx;
        y = +my;
        break;
      case "H":
        x = values[0];
        break;
      case "V":
        y = values[0];
        break;
      case "M":
        mx = values[vLen - 2];
        my = values[vLen - 1];

      default:
        x = values[vLen - 2];
        y = values[vLen - 1];
    }

  }
  // round coordinates
  if (decimals >= 0) {
    pathData = roundPathData(pathData, decimals);
  }
  return pathData;
}

// just rounding to prevent awful floating point values
function roundPathData(pathData, decimals = -1) {
  pathData.forEach((com, c) => {
    if (decimals >= 0) {
      com.values.forEach((val, v) => {
        pathData[c].values[v] = +val.toFixed(decimals);
      });
    }
  });
  return pathData;
}

svg {
  width: 20em;
  overflow: visible;
}

#path {
  marker-start: url(#markerStart);
  marker-mid: url(#markerRound);
  stroke-width: 0.33%;
}

textarea {
  display: block;
  width: 100%;
  min-height: 30em;
}

Shift starting point 


Output

You might try my codepen example path direction and starting point sanitizer

Alternative: stroke-dashoffset

Besides, you could also use a stroke-dashoffset as described here:
"How to change start point of svg line animation"

body {
  font-family: sans-serif;
  margin:1em;
}

svg {
  overflow: visible;
  height:75vmin;
  width:auto;
}

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

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

Change start point of svg stroke animation

Answers (2)

Shift `M` (starting point)

JS aproach 1: Shift starting points using `getPathData()` (polyfilled)

How it works

JS aproach 2: Retain `Q`, `A` commands (also based on `getPathdata()`)

Alternative: stroke-dashoffset

Related Questions

Change start point of svg stroke animation

Answers (2)

Shift M (starting point)

JS aproach 1: Shift starting points using getPathData() (polyfilled)

How it works

JS aproach 2: Retain Q, A commands (also based on getPathdata())

Alternative: stroke-dashoffset

Related Questions

Shift `M` (starting point)

JS aproach 1: Shift starting points using `getPathData()` (polyfilled)

JS aproach 2: Retain `Q`, `A` commands (also based on `getPathdata()`)