前端 不规则进度条，求好的思路？

问题：

• 制作一个不规则的进度条，其外观是一个水塔，水面随进度动态调整高度。
• 进度低于 20% 时显示为红色，其余进度显示为绿色。
• 整体尺寸应自适应父布局。

思路：

• 使用 SVG 图片作为进度条，利用 clip-path 进行裁切显示水面上升效果。
• 根据进度值动态修改 clip-path 的高度，即可实现水面高度动态变化。
• 使用 CSS 设置进度条颜色，满足低于 20% 红色，其余进度绿色的要求。
• 为了自适应父布局，使用 vw 和 vh 单位进行尺寸设置。

代码示例：

<svg class="progress-bar" width="100vw" height="100vh" viewBox="0 0 120 120">
  <defs>
    <mask id="water-mask">
      <rect width="100%" height="100%" fill="white" />
    </mask>
  </defs>
  <path id="water" mask="url(#water-mask)" d="M50 100...[水塔轮廓路径]" fill="blue" />
</svg>