how to make a shape in svg or with figma-CodePudding

This is the image which I need to create.

I need to make this image with svg or with figma in png format. the black portion will be transparent. please help me. thanks

CodePudding user response：

You can create a rectangle that is masked off by a circle.

body {
  background-color: silver;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200">
  <defs>
    <mask id="m1">
      <rect width="100" height="100" fill="white" />
      <circle r="100" fill="black"/>
    </mask>
  </defs>
  <rect width="100" height="100" fill="white" mask="url(#m1)"/>
</svg>

CodePudding user response：

This is a very simple path.

M 0 100
Move to (0, 100) (bottom left)

H 100
Horizontal line to bottom right

V 0
Vertical line to top right

A 100 100 0 0 1 0 100
Semicircular arc of radius 100, clockwise, to (0, 100) (bottom right).

Z
Close path

svg {
  width: 200px;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M 0 100 H 100 V 0 A 100 100 0 0 1 0 100 Z" fill="black"/>
</svg>