纯CSS实现SVG心形图标点击填充/清空动画的技术求助

实现了点击心形图标后缓慢填充红色（点赞状态），再次点击清空填充（取消点赞）的交互效果，仅使用HTML/CSS完成，且代码兼容W3校验。

HTML代码 #

<svg class='bigHeart' height="0" width="0">
    <defs>
        <clipPath id="svgClip" clipPathUnits="objectBoundingBox" transform="scale(0.01 0.01)">
            <path d='M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z'></path>
        </clipPath>
    </defs>
    <linearGradient id="my-cool-gradient" x2="1" y2="1">
        <stop offset="0%" stop-color="#FF79DA" />
        <stop offset="100%" stop-color="#9356DC" />
    </linearGradient>
</svg>
<div class="heart-container">
    <svg viewBox="0 0 100 100" class='heart-stroke'>
        <path class="bigHeart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
    </svg>
    <input type='checkbox' class='heart-clip'>
    <div class="fill">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" xml:space="preserve">
            <path d="M0,6c100,10,100,-10,200,0c100,10,100,-10,200,0v394h-400Z" class="waveShape"></path>
        </svg>
    </div>
</div>

CSS代码 #

:root {
  --stroke-width: 2px;
  --heart-width: 100%;
  --transition-length: 1.2s;
  --heart-color:#d32f2f;
}

.heart-container {
  position: relative;
  width:10%;
  aspect-ratio: 1/1;
  overflow: hidden;
  clip-path: url(#svgClip);
}

.heart-clip {
  appearance: none;
  margin: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  overflow: hidden;
  z-index: 2;
 
}

.heart-clip + .fill {
  top:0;
  left:0;
  transform: translateY(50%);
  width: calc(2 * var(--heart-width, 100px));
  aspect-ratio: 1/1;
  transition: transform var(--transition-length, 0s) cubic-bezier(.2, .6, .8, .4);
}
 
.heart-clip:checked + .fill {
  transform: translateY(0);
}

.heart-stroke {
  width: calc(100% - (2 * var(--stroke-width, 2px)));
  aspect-ratio: 1/1;
  position: absolute;
  top: var(--stroke-width, 0);
  left: var(--stroke-width, 0);
  fill: transparent;
  stroke: var(--heart-color);
  stroke-width: var(--stroke-width, 1px);
}

.waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 1s;
  fill: var(--heart-color);
}

@keyframes waveAction {
  0% {
     transform: translate(-175px, 0px);
  }
  100% {
     transform: translate(0px, 0px);
  }
}

内容的提问来源于stack exchange，提问作者Elradsoldier