I'm trying to figure out why there's a line in this SVG animation that I'm trying to make. But it's only an effect of animating it with css, and it's not part of the SVG itself. It seems to be some stroke but stroke: none doesn't affect it.
image showing the stroke

https://jsfiddle.net/bgu2e7pn/

PS: I would also appreciate if you can point out how to have the full width of the coffee content svg exceed the cup width so it looks more seamless.

CodePudding user response：

You can work around this bug by using a mask instead of a clip-path.

   body {
     background: grey;
   }
    #coffee-cup .fill {
      animation-name: coffeeFill;
      animation-iteration-count: 1;
      animation-timing-function: cubic-bezier(.2, .6, .8, .4);
      animation-duration: 4s;
      animation-fill-mode: forwards;
    }
    #coffee-cup #waveShape {
      animation-name: waveMotion;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-duration: 0.5s;
      fill: #8C5926;
      stroke: #3D2518;
      stroke-width: 10px;
    }
    
    @keyframes coffeeFill {
      0% {
        transform: translate(0, 150px);
      }
      100% {
        transform: translate(0, -15px);
      }
    }
     @keyframes waveMotion {
      0% {
        transform: translate(-150px, 0);
      }
      100% {
        transform: translate(0, 0);
      }
    } 

<div id="coffee-cup">
    <div>

        <svg  width="259" height="180" viewBox="0 0 259 180" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M259 0H53L55.8218 23.0874C24.0777 28.8271 0 56.6017 0 90C0 127.555 30.4446 158 68 158C69.4425 158 70.8746 157.955 72.2948 157.867L75 180H238L259 0ZM57.7548 38.9028L70.4677 142.918C69.4854 142.972 68.496 143 67.5 143C38.5051 143 15 119.495 15 90.5C15 64.835 33.4162 43.4713 57.7548 38.9028Z"
                fill="white" fill-opacity="0.7" />

            <mask id="coffee">
               <rect width="100%" height="100%" fill="black"/>
               <path d="M70 49H244L232.139 156H82.2489L70 49Z" fill="white" />
            </mask>

            <g mask="url(#coffee)">
                <g >
                    <path id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
                </g>
            </g>
        </svg>