How to Create a Multiple Semi-circle on The Right Side with CSS

Issue

How to create multiple half/semi-circle on one side only (check my image below)?

My expected result:

The result:

The code I have tried:

.ticket {
  display: inline-block;
  width: 500px;
  height: 200px;
  overflow: hidden;
  background: orange;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  --mask: radial-gradient(16px at 16px 50%, #0000 100%, #000) -16px/ 100% 50px;
}

<div class="ticket"></div>

Solution

Pick the right side version from my online generator then update the radius

.ticket {
  display: inline-block;
  width: 500px;
  height: 200px;
  overflow: hidden;
  background: orange;
  /* 20px is the radius, it needs to be smaller than 50px/2 */
  --mask: radial-gradient(20px at right,#0000 97%,#000) 50%/100% 50px;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

<div class="ticket"></div>

Answered By - Temani Afif