如何动态调整具有动画笔划粗细的矩形路径的大小？

<div id="rectangle"></div>

#rectangle {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  animation: resize 2s infinite alternate;
}

@keyframes resize {
  0% {
    width: 100px;
    height: 100px;
    border-width: 2px;
  }
  50% {
    width: 200px;
    height: 200px;
    border-width: 4px;
  }
  100% {
    width: 100px;
    height: 100px;
    border-width: 2px;
  }
}

function resizeRectangle() {
  const rectangle = document.getElementById('rectangle');
  const currentWidth = parseInt(rectangle.style.width);
  const currentHeight = parseInt(rectangle.style.height);
  const currentBorderWidth = parseInt(rectangle.style.borderWidth);

  const targetWidth = // 根据需求计算目标宽度
  const targetHeight = // 根据需求计算目标高度
  const targetBorderWidth = // 根据需求计算目标边框粗细

  rectangle.style.width = targetWidth + 'px';
  rectangle.style.height = targetHeight + 'px';
  rectangle.style.borderWidth = targetBorderWidth + 'px';

  requestAnimationFrame(resizeRectangle);
}

resizeRectangle();