如何在 svg 或 figma 中制作形状

Question

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

Answer 1

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>

Answer 2

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>