2

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

source2003
  • 23
  • 2

2 Answers2

1

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Thank you, it's what i need, can you tell me how you rewrite d attribute? – source2003 Dec 08 '22 at 11:43
  • I've changed it manually by searching in the code the point you wanted the animation to begin. If you are not acquainted with the svg syntax you may need to go back to the drawing board – enxaneta Dec 08 '22 at 11:52
1

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 <path> 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;
}
<p><label>Shift starting point <input type="range" id="inputShift" steps="1" min="0" max="100" value="0"></label></p>

<svg id="svgPrev" viewBox="1 1 216 194">
  <path id="path" d="M169.6 152.3c-15.1 13.9-32.8 27.3-53.2 40c-1.1 0.7-2.3 1.4-3.7 1.9s-2.6 0.8-3.7 0.8s-2.2-0.3-3.6-0.8s-2.7-1.2-3.8-1.9c-20.4-12.7-38.1-26.1-53.2-40s-26.7-28.3-35-43s-12.4-29.6-12.4-44.6c0-9.3 1.5-17.9 4.6-25.6s7.3-14.5 12.9-20.3s11.9-10.1 19.2-13.2s15.2-4.6 23.8-4.6c10.6 0 19.9 2.6 28 7.9c6.9 4.5 12.7 14 17.2 22.2c1 1.7 3.6 1.7 4.6 0c4.5-8.2 10.3-17.7 17.2-22.2c8.1-5.3 17.4-7.9 28-7.9c8.6 0 16.5 1.5 23.8 4.6s13.7 7.5 19.2 13.2s9.9 12.5 12.9 20.3s4.6 16.3 4.6 25.6c0 15-4.1 29.9-12.4 44.6s-19.9 29-35 43z"></path>
</svg>
<h3>Output</h3>
<textarea id="svgOut" ></textarea>

<!-- markers to show commands -->
<svg id="svgMarkers" style="width:0; height:0; position:absolute; z-index:-1;float:left;">
  <defs>
    <marker id="markerStart" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
      <circle cx="5" cy="5" r="10" fill="green"></circle>

      <marker id="markerRound" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
        <circle cx="5" cy="5" r="2.5" fill="red"></circle>
      </marker>
  </defs>
</svg>

<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.4/path-data-polyfill.min.js"></script>

How it works

  • parse the <path> 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;
}
<p><label>Shift starting point <input type="range" id="inputShift" steps="1" min="0" max="100" value="0"></label></p>

<svg id="svgPrev" viewBox="1 1 216 194">
  <path id="path" d="
                M 50 0         
                Q 36.4 0 24.8 6.8        
                t -18 18         
                t -6.8 25.2         
                C 0 63.8 5.6 76.3 14.65 85.35         
                s 21.55 14.65 35.35 14.65         
                A 50 50 0 0 0100 50         
                h -12.5         
                v -25         
                H 50         
                V 0        
                z "></path>
</svg>
<h3>Output</h3>
<textarea id="svgOut"></textarea>

<!-- markers to show commands -->
<svg id="svgMarkers" style="width:0; height:0; position:absolute; z-index:-1;float:left;">
  <defs>
    <marker id="markerStart" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
      <circle cx="5" cy="5" r="5" fill="green"></circle>

      <marker id="markerRound" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
        <circle cx="5" cy="5" r="2.5" fill="red"></circle>
      </marker>
  </defs>
</svg>

<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.4/path-data-polyfill.min.js"></script>

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;
  }
}
<svg width="218" height="196" viewBox="0 0 218 196" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M169.605 152.315C154.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.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.315Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
herrstrietzel
  • 11,541
  • 2
  • 12
  • 34