Javascript 如何根据百分比（svg或纯css）创建要更改的图像

对于我目前正在开发的网站来说，它有一个僵尸主题，人们可以将东西提交到一个罐子中，赢家赢得罐子

对于加载条之类的东西，我想要一个僵尸，我在想这张图片左边的那个：

我想在人们把东西放进去的时候，用一种类似血液的液体把它填满，然后当它填满100%的时候，罐子就会被抽出来

我很好奇，如果我必须把这个图像转换成SVG，或者如果我可以用CSS重新创建这个图像，我想在顶部有一个像wavy一样的液体效果，我想知道什么是实现这一点的最佳方法

如果你需要更多的信息，尽管问。谢谢

我是这样想的：

我的主要问题是：我是否可以以某种方式将这个僵尸图像直接转换为CSS，或者我是否可以通过将其转换为SVG并以某种方式实现这种效果？我没有使用SVG的经验

Code pen link needs code apparently even though its not mine

---

也许css背景渐变？如果图像是剪切的，可以使背景变黑，并使红色渐变慢慢向上移动。以这个为例：这可能是您想要的：@Datsik搜索Google以将PNG转换为SVG。似乎有一些在线工具可用。我以前使用GIMP只执行了几个步骤，但不记得具体的转换为路径。我不明白你为什么要把它当作CSS。使用PNG并使内部部分透明。图像的外部将是白色或网站背景的任何颜色。因此，实际的波形将是一个大的矩形或正方形，但由于会有一个纯白色图像，僵尸是透明的，因此用户只能看到僵尸充满液体。有多种方法可以做到这一点，但我推荐使用PNG覆盖的方法。在这里：