SVG—；具有平滑边缘切口的径向渐变

我正在尝试创建一个类似这样的SVG背景图像（两种颜色，径向渐变，S形剪切，边缘平滑）：

创建径向渐变非常容易（例如，使用）：

---

但是也可以添加剪贴画吗？

您可以在白色元素上使用模糊使其看起来像剪贴画

---

您可以在白色元素上使用模糊，使其看起来像剪纸

---

Lennis的回答很接近。但是，如果将填充和过滤器组合在一个元素中，而不是尝试使用模糊的白色形状来隐藏部分渐变，则可以获得更好的效果

请注意，模糊将影响形状的任何边，包括顶部、左侧和右侧。因此，您需要确保这些边远离SVG视口的边（外部）

---

Lennis的回答很接近。但是，如果将填充和过滤器组合在一个元素中，而不是尝试使用模糊的白色形状来隐藏部分渐变，则可以获得更好的效果

请注意，模糊将影响形状的任何边，包括顶部、左侧和右侧。因此，您需要确保这些边远离SVG视口的边（外部）

<!-- SVG syntax --> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<radialGradient id="g920" gradientUnits="userSpaceOnUse" cx="5.408560311284047%" cy="0%" r="93.04166277718278%">
<stop stop-color="#ed1c24" offset="0.1"/><stop stop-color="#003663" offset="1"/>
</radialGradient>
<rect x="-50" y="-50" width="101" height="101" fill="url(#g920)" />
</svg>