Glass blur using svg clipPath

gistfile1.txt

<div style="
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 1000;
">
  <div style="
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: url(#svgClipPath);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: #FFFFFF55;
"></div>
  <svg width="100%" height="100%" x="0px" y="0px" viewBox="0 0 1440 848" enable-background="new 0 0 1440 848"
    xml:space="preserve" preserveAspectRatio="none">
    <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
      <path style="fill:#ffffff;" d="m 0,0 v 1 h 1 c 0,0 -0.37,-0.01 -0.52,-0.42 C 0.36,0.26 0.41,0 0.41,0 Z"
        sodipodi:nodetypes="cccscc" width="100%" height="100%"></path>
    </clipPath>
  </svg>
</div>