Without clippath
<svg class="accent" xmlns="http://www.w3.org/2000/svg" width="969.117" height="892.007" viewBox="0 0 969.117 892.007"> <path id="Path_3040" data-name="Path 3040" d="M934.195,301.665c234.834,685.823-786.69,735.579-919.672,347.22S699.361-384.158,934.195,301.665" transform="translate(0)" fill="#f2c9c9" opacity="0.999"/> </svg>
With clippath and SVG size between 0 and 1
<svg class="accent clip-accent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"> <defs> <clipPath id="clippath" clipPathUnits="objectBoundingBox"> <path d="M.964.338c.242.769-.812.825-.949.389S.722-.431.964.338" fill="#f2c9c9"/> </clipPath> </defs> </svg>
With clippath and SVG size above 1
On hover use previous clippath id
<svg class="accent clip-accent" xmlns="http://www.w3.org/2000/svg" width="969.117" height="892.007" viewBox="0 0 969.117 892.007"> <defs> <clipPath id="clippath2" clipPathUnits="objectBoundingBox"> <path d="M934.195,301.665c234.834,685.823-786.69,735.579-919.672,347.22S699.361-384.158,934.195,301.665" fill="#f2c9c9"/> </clipPath> </defs> </svg>
