Dripping SVG clip-path on animation

Question

In the following example, I apply a clip-path and animate a block in that path to simulate pouring. The issue is, while it looks like it's rendering well in Safari, we can see the box boundaries of the animated path in Chrome. Any idea why, and how to get rid of them?

.fill {
    animation-name: fillAction;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.2, .6, .8, .4);
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
#waveShape {
    animation-name: waveAction;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2s;
    fill: #300f0f;
}
@keyframes fillAction {
    0% {
        transform: translate(0, 700px);
    }
    100% {
        transform: translate(0, 250px);
    }
}
@keyframes waveAction {
    0% {
        transform: translate(380px, 0);
    }
    100% {
        transform: translate(-235px, 0);
    }
}

<svg class="h-full w-full" viewBox="0 0 1500 1500">
    <defs>
        <clipPath id="drop">
            <path d="M 537.5,714.5 C 744.168,714.167 950.834,714.5 1157.5,715.5C 1170.62,825.317 1137.29,918.15 1057.5,994C 970.54,1067.47 871.54,1090.14 760.5,1062C 667.845,1033.01 601.012,974.512 560,886.5C 536.431,831.281 528.931,773.948 537.5,714.5 Z" />
        </clipPath>
    </defs>
    <g clip-path="url(#drop)">
        <g class="fill">
            <path
                id="waveShape"
                d="M 265.5,488.5 C 265.897,487.475 266.563,487.308 267.5,488C 266.906,488.464 266.239,488.631 265.5,488.5 Z M 888.5,488.5 C 888.897,487.475 889.563,487.308 890.5,488C 889.906,488.464 889.239,488.631 888.5,488.5 Z M 248.5,490.5 C 258.172,490.334 267.839,490.5 277.5,491C 292.931,492.686 308.264,495.019 323.5,498C 340.141,499.478 356.808,499.811 373.5,499C 407.587,492.498 441.92,490.831 476.5,494C 502.019,497.965 527.686,500.132 553.5,500.5C 564.855,500.46 576.188,499.96 587.5,499C 618.82,494.292 650.32,492.126 682,492.5C 705.194,492.581 728.36,493.414 751.5,495C 769.224,497.858 787.058,499.692 805,500.5C 827.502,499.666 849.668,496.5 871.5,491C 884.529,490.231 897.529,490.564 910.5,492C 922.5,494 934.5,496 946.5,498C 963.141,499.478 979.808,499.811 996.5,499C 1030.59,492.498 1064.92,490.831 1099.5,494C 1125.02,497.965 1150.69,500.132 1176.5,500.5C 1187.86,500.46 1199.19,499.96 1210.5,499C 1259.65,492.451 1308.99,490.784 1358.5,494C 1371.26,494.455 1383.93,495.788 1396.5,498C 1395.48,498.519 1394.82,499.353 1394.5,500.5C 1395.5,753.146 1395.83,1005.81 1395.5,1258.5C 978.833,1258.5 562.167,1258.5 145.5,1258.5C 145.5,1004.83 145.5,751.167 145.5,497.5C 180.445,502.459 214.778,500.126 248.5,490.5 Z"
            />
        </g>
    </g>
</svg>

Answer 1

As a possible solution you can use a mask instead:

.fill {
    animation-name: fillAction;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.2, .6, .8, .4);
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
#waveShape {
    animation-name: waveAction;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2s;
    fill: #300f0f;
}
@keyframes fillAction {
    0% {
        transform: translate(0, 700px);
    }
    100% {
        transform: translate(0, 250px);
    }
}
@keyframes waveAction {
    0% {
        transform: translate(380px, 0);
    }
    100% {
        transform: translate(-235px, 0);
    }
}

<svg class="h-full w-full" viewBox="0 500 1500 1000">
    <defs>
        <mask id="drop">
          <rect y="500" width="1500" height="1000" />
            <path d="M 537.5,714.5 C 744.168,714.167 950.834,714.5 1157.5,715.5C 1170.62,825.317 1137.29,918.15 1057.5,994C 970.54,1067.47 871.54,1090.14 760.5,1062C 667.845,1033.01 601.012,974.512 560,886.5C 536.431,831.281 528.931,773.948 537.5,714.5 Z" fill="white" />
        </mask>
    </defs>
    <g mask="url(#drop)">
        <g class="fill">
            <path
                id="waveShape"
                d="M 265.5,488.5 C 265.897,487.475 266.563,487.308 267.5,488C 266.906,488.464 266.239,488.631 265.5,488.5 Z M 888.5,488.5 C 888.897,487.475 889.563,487.308 890.5,488C 889.906,488.464 889.239,488.631 888.5,488.5 Z M 248.5,490.5 C 258.172,490.334 267.839,490.5 277.5,491C 292.931,492.686 308.264,495.019 323.5,498C 340.141,499.478 356.808,499.811 373.5,499C 407.587,492.498 441.92,490.831 476.5,494C 502.019,497.965 527.686,500.132 553.5,500.5C 564.855,500.46 576.188,499.96 587.5,499C 618.82,494.292 650.32,492.126 682,492.5C 705.194,492.581 728.36,493.414 751.5,495C 769.224,497.858 787.058,499.692 805,500.5C 827.502,499.666 849.668,496.5 871.5,491C 884.529,490.231 897.529,490.564 910.5,492C 922.5,494 934.5,496 946.5,498C 963.141,499.478 979.808,499.811 996.5,499C 1030.59,492.498 1064.92,490.831 1099.5,494C 1125.02,497.965 1150.69,500.132 1176.5,500.5C 1187.86,500.46 1199.19,499.96 1210.5,499C 1259.65,492.451 1308.99,490.784 1358.5,494C 1371.26,494.455 1383.93,495.788 1396.5,498C 1395.48,498.519 1394.82,499.353 1394.5,500.5C 1395.5,753.146 1395.83,1005.81 1395.5,1258.5C 978.833,1258.5 562.167,1258.5 145.5,1258.5C 145.5,1004.83 145.5,751.167 145.5,497.5C 180.445,502.459 214.778,500.126 248.5,490.5 Z"
            />
        </g>
    </g>
</svg>

I've changed the viewBox of the svg element because I wanted the animation in the view but you can change it back to what you want.