[SOLVED] Css SVG mask causes jagged edges

Css SVG mask causes jagged edges

I use SVG for backgroundclipping. It is very nice, except on a very long container. If the container is too long, the edges will become jagged. Is there a reason and solution for this?

It must be a mask, because the background can also be an image or gradient. Maybe there is a whole other better solution for my case.

note: the black boxes on the side of the arrow (on wide screens) may be ignored.

.container {
  height:75rem;
  position: relative;
}

.bg {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: -82px;
    width: 101dvw;
    left: 50%;
    margin-left: -50.5dvw;

    mask: url(https://download.peggypay.com/wimtegroen/images/1large.svg) no-repeat center bottom, linear-gradient(#000 0 0);
    mask-composite: exclude;
    mask-size: 1920px 82px;
  background-color:black;
}

<div class="container">
  <div class="bg">
    Hoi
  </div>
</div>

https://codepen.io/wimtegroen/pen/jENPKOo

Solution

Use a more simple SVG and do it like below. No need an external file.

.box {
  --h: 50px; /* height of the arrow */

  height: 300px;
  background: linear-gradient(60deg,red,blue);
  mask:
    linear-gradient(#000 0 0) 0 calc(1px - var(--h)) no-repeat,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><path d="M0 0 L64 0 L46 18 C36 28 28 28 18 18 Z"/></svg>') bottom/auto var(--h) no-repeat;
}

<div class="box"></div>

The SVG code alone:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32">
  <path d="M0 0 L64 0 L46 18 C36 28 28 28 18 18 Z"/>
</svg>