居中剪辑路径：路径 css 元素

Question

我正在尝试创建一个动画 svg 蒙版，我选择使用 clip-path: path css 元素。

这是我的 html:

#home-1 .welcomeBlurbAnimation {
  width: 100%;
  z-index: 1;
  position: absolute;
  margin-top: -130px;
}

#home-1 .welcomeBlurbAnimation .welcomeBlurbAnimationBox img {
  max-width: 600px;
  float: right;
}

.clip-animation {
  clip-path: path("M103.4 -92.6C130.9 -75.9 147.9 -37.9 152.5 4.6C157.1 47.1 149.3 94.3 121.8 120.1C94.3 145.9 47.1 150.5 7.3 143.2C-32.5 135.9 -65.1 116.7 -83.4 90.9C-101.7 65.1 -105.9 32.5 -105.2 0.7C-104.4 -31.1 -98.9 -62.2 -80.6 -78.9C-62.2 -95.6 -31.1 -97.8 3.4 -101.2C37.9 -104.6 75.9 -109.2 103.4 -92.6");
}

.clip-animation {
  animation: clip 5s infinite;
  object-fit: cover;
}

@keyframes clip {
  0% {
    clip-path: path("M103.4 -92.6C130.9 -75.9 147.9 -37.9 152.5 4.6C157.1 47.1 149.3 94.3 121.8 120.1C94.3 145.9 47.1 150.5 7.3 143.2C-32.5 135.9 -65.1 116.7 -83.4 90.9C-101.7 65.1 -105.9 32.5 -105.2 0.7C-104.4 -31.1 -98.9 -62.2 -80.6 -78.9C-62.2 -95.6 -31.1 -97.8 3.4 -101.2C37.9 -104.6 75.9 -109.2 103.4 -92.6");
  }
  20% {
    clip-path: path("M80.5 -63.8C113.8 -47.1 156.9 -23.6 167.2 10.3C177.4 44.1 154.8 88.2 121.5 109.8C88.2 131.5 44.1 130.7 9.9 120.8C-24.3 110.9 -48.6 91.9 -72.2 70.2C-95.9 48.6 -118.9 24.3 -129.1 -10.1C-139.2 -44.5 -136.4 -89.1 -112.8 -105.8C-89.1 -122.4 -44.5 -111.2 -10.5 -100.7C23.6 -90.2 47.1 -80.5 80.5 -63.8");
  }
  40% {
    clip-path: path("M78 -75C108.8 -47.1 146.9 -23.6 149 2.1C151.1 27.8 117.3 55.6 86.5 85.3C55.6 115 27.8 146.5 -6 152.5C-39.8 158.5 -79.7 139 -113 109.3C-146.3 79.7 -173.2 39.8 -167.5 5.7C-161.9 -28.5 -123.7 -57 -90.4 -84.9C-57 -112.7 -28.5 -139.9 -2.5 -137.4C23.6 -134.9 47.1 -102.8 78 -75");
  }
  60% {
    clip-path: path("M103.6 -108C121.5 -85.8 114.2 -42.9 104.6 -9.7C94.9 23.6 82.8 47.1 65 72.5C47.1 97.8 23.6 124.9 -5.7 130.6C-34.9 136.2 -69.8 120.4 -103.1 95.1C-136.4 69.8 -168.2 34.9 -169.5 -1.3C-170.8 -37.5 -141.6 -75 -108.3 -97.1C-75 -119.3 -37.5 -126.1 2.7 -128.9C42.9 -131.6 85.8 -130.1 103.6 -108");
  }
  80% {
    clip-path: path("M92.3 -104.6C111.9 -72.6 115 -36.3 115.9 0.9C116.9 38.2 115.7 76.4 96 101.7C76.4 127 38.2 139.5 -4.5 144C-47.1 148.5 -94.3 144.9 -110.9 119.6C-127.6 94.3 -113.8 47.1 -103 10.8C-92.1 -25.5 -84.2 -50.9 -67.6 -82.9C-50.9 -114.9 -25.5 -153.5 5.4 -158.9C36.3 -164.3 72.6 -136.6 92.3 -104.6");
  }
  100% {
    clip-path: path("M103.4 -92.6C130.9 -75.9 147.9 -37.9 152.5 4.6C157.1 47.1 149.3 94.3 121.8 120.1C94.3 145.9 47.1 150.5 7.3 143.2C-32.5 135.9 -65.1 116.7 -83.4 90.9C-101.7 65.1 -105.9 32.5 -105.2 0.7C-104.4 -31.1 -98.9 -62.2 -80.6 -78.9C-62.2 -95.6 -31.1 -97.8 3.4 -101.2C37.9 -104.6 75.9 -109.2 103.4 -92.6");
  }
}

<div class="welcomeBlurbAnimationbox">
  <img id="morphHomeImg" class="clip-animation" src="https://enricopiras.it/wp-content/uploads/2023/01/Web-designer-a-Genova.jpg">
</div>

问题是我希望形状完全可见，但我的代码结果是这样的，形状用红色圈起来：

有一种方法可以使所有形状可见并使用此 css 在他的父 div 中居中？谢谢