clip-path:path()レスポンシブ

解決したいこと

clip-pathでのレスポンシブ対応についての質問です。（HTMLがごちゃつくのが嫌で、CSS内に記述がしたいのですが）clip-path:path()を使ってサイト上部にSVGコードを使って波線のような装飾を作ったのですが、レスポンシブに対応しません。HTMLでsvgタグを使いviewboxでやると、ちゃんとレスポンシブ対応になるのですが、cssでwidth100%でやってもうまくいきません。解決方法はありますでしょうか。

発生している問題・エラー

該当するソースコード

HTML

CSS
.bg {
position:absolute
top:0
left:0
width:100%
height:100vh
background-color:red
opacity:0.2
z-index:2
clip-path: path("M0,160L24,....")}

自分で試したこと