Generate reverse circle clip-path

clip-path.ts

 // number of verticies
const precision = 64

// radius in percent (where 50 = full circle)
const containerWidth = 40
const borderWidth = 1
const radius = borderWidth/containerWidth // 48.5
const points = [...Array(precision)].map((_, i) => {
  let a = -i/(precision-1)*Math.PI*2;
  let x = Math.cos(a)*radius + 50;
  let y = Math.sin(a)*radius + 50;
  return `${x.toFixed(3)}% ${y.toFixed(3)}%`
})

const outline = ['100% 50%', '100% 100%', '0 100%', '0 0', '100% 0', '100% 50%']
const polygon = outline.concat(points).join(', ');
console.log(`clip-path: polygon(${polygon});`)