自定义Wave Divider CSS，SVG

Question

我有以下代码，并且效果很好，但是我想使用SVG代码，而不是使用SVG图像，我该怎么做？我抓住了SVG代码表格getWaves.io，

section[data-section-id="62adfe4a705320199dc8f003"] {
overflow:visible;

.section-background {
    overflow:visible !important;
}
    .section-background::before {
    content:"";
    position:absolute;
    transform:translateY(-90%);
    width:100%;
    height:20vh;
    background-color:inherit !important;
    -webkit-mask-image:url('https://static1.squarespace.com/static/627109a2d400dd23d4702296/t/62af4df934fbb37678dacc07/1655655929639/Asset+1.svg');
    -webkit-mask-size:cover;
    -webkit-mask-repeat:no-repeat; 
    @media screen and (max-width: 767px) {
      -webkit-mask-size: cover;
              mask-size: 100% 100%;
    }
  
  
  
  }
}

这是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,288L60,250.7C120,213,240,139,360,138.7C480,139,600,213,720,250.7C840,288,960,288,1080,245.3C1200,203,1320,117,1380,74.7L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>