Filling with no holes SVG paths that include open subpaths inside

Viewed 63

Is is possible to fill without holes a path that contains an open subpath like the one in the example? I've tried fiddling with fill-rule css property and order of points in the subpath to alter the winding order, but at least one hole is always present.

Codepen live-demo

path {
  fill: aqua;
  stroke: red;
  /* fill-rule: evenodd; */
  fill-rule: nonzero;
}
<svg width="600px" height="200px" viewBox="0 0 2400 600">
  <path d="M0,0 L1200,0 v0,600 h-1200,0Z M200,300 Q400,50 600,300 T1000,300" stroke-width="5"/>
  <path d="M1200,0 L2400,0 v0,600 h-1200,0Z M2200,300 Q2000,550 1800,300 T1400,300" stroke-width="5"/>
</svg>

0 Answers
Related