Triangle svg with a transparent semi-circle on its side

Question

I'm searching a way to make those svg path, but without luck for now. I was searching on the internet for a long time ... I know that css can do this but if someone knows how to build them with SVG it would be really nice.

Thank you

First SVG :

Second SVG :

Answer 1

You should learn about SVG path commands.

https://www.w3.org/TR/SVG2/paths.html#PathData

For example, you can define such shapes by list of some path commands.

<svg viewBox="0 0 200 200" width="200" height="200">
  <path d="M0 0l60 60a1 1 0 0 0 80 80l60 60h-200z"/>
</svg>
<svg viewBox="0 0 200 200" width="200" height="200">
  <path d="M0 0l60 60a1 1 0 0 1 80 80l60 60v-200z"/>
</svg>