纯 CSSJS 的 SVG 连续向内方形螺旋动画

let spiral1 = createSquareSpiralPath(50, 500, 1000);
let spiral1_2 = createSquareSpiralPath(20, 1000, 500);
let spiral2 = createSquareSpiralPath(150, 300, 300);


function createSquareSpiralPath(strokeWidth, width, height) {
  let maxIterations = Math.trunc(Math.min(width, height) / 2 / strokeWidth); 
  let coords = [];

  //calculate max X/Y coordinates according to stroke-width 
  let strokeToWidthRatio = width * 1 / strokeWidth;
  let strokeToHeightRatio = height * 1 / strokeWidth;
  let maxX = (width - strokeWidth / strokeToWidthRatio) / 2;
  let maxY = (height - strokeWidth / strokeToHeightRatio) / 2;

  for (let i = 0; i <= maxIterations; i++) {
    const step = strokeWidth * i;
    // calculate points in iteration    
    let [x1, y1] = [step, (height - step)];
    let [x2, y2] = [step, step];
    let [x3, y3] = [(width - step - strokeWidth), step];
    let [x4, y4] = [(width - step - strokeWidth), (height - step - strokeWidth)];

    //stop drawing if max X/Y coordinates are reached 
    if (x1 <= maxX && y1 >= maxY) {
      coords.push(x1, y1)
    }
    if (x2 <= maxX && y2 <= maxY) {
      coords.push(x2, y2)
    }
    if (x3 >= maxX && y3 <= maxY) {
      coords.push(x3, y3)
    }
    if (x4 >= maxX && y4 >= maxY) {
      coords.push(x4, y4)
    }
  }
  let points = coords.join(' ');

  //calc pathLength from coordinates
  let pathLength = 0;
  for (let i = 0; i < coords.length - 2; i += 2) {
    let x1 = coords[i];
    let y1 = coords[i + 1];
    let x2 = coords[i + 2];
    let y2 = coords[i + 3];
    let length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    pathLength += length;
  }

  //optional: render svg
  renderSpiralSVG(points, pathLength, width, height, strokeWidth);
  return [points, pathLength];
}


function renderSpiralSVG(points, pathLength, width, height, strokeWidth) {
  const ns = "http://www.w3.org/2000/svg";
  let svgTmp = document.createElementNS(ns, "svg");
  svgTmp.setAttribute(
    "viewBox", [-strokeWidth / 2, -strokeWidth / 2, width, height].join(" ")
  );
  let newPolyline = document.createElementNS(ns, "polyline");
  newPolyline.classList.add("spiral");
  newPolyline.setAttribute("points", points);
  svgTmp.appendChild(newPolyline);
  document.body.appendChild(svgTmp);

  newPolyline.setAttribute(
    "style",
    `fill:transparent;
    stroke:black;
    stroke-linecap: square;
    stroke-width:${strokeWidth}; 
    stroke-dashoffset: ${pathLength};
    stroke-dasharray: ${pathLength};`
  );
}

svg {
  border: 1px solid red;
}

svg {
  display: inline-block;
  height: 20vw;
}

.spiral {
  stroke-width: 1;
  animation: moveToTheEnd 1s linear forwards;
}

.spiral:hover {
  stroke-width: 1!important;
}

@keyframes moveToTheEnd {
  to {
    stroke-dashoffset: 0;
  }
}

<p> Hover to see spiral lines</p>