htmlsvgvectorgraphicssvg-path

Triangle svg with a transparent semi-circle on its side

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 : First

Second SVG : Second

Solution

  • 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>