<div class="frame_1">
 <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.69 605.5"><defs><style>.a{fill:#ff0;stroke:#000;stroke-miterlimit:10;}</style></defs><title>1</title><path class="a" d="M366.5,74.5c1.19,58.5-.19,314.24-.19,314.24V678.5H987V74H670.89Z" transform="translate(-365.81 -73.5)"/></svg>
  
</div>

<div class="frame_2">
 <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 622.97 606.76"><defs><style>.a{fill:#ff0;stroke:#000;stroke-miterlimit:10;}</style></defs><title>2</title><path class="a" d="M366.5,74.5c43,68,289,295,289,295l-289.19,309,317.19-279L987,678.5l-270.5-308L987,74,682.5,335.5Z" transform="translate(-364.4 -72.12)"/></svg>
  </div>

<div class="frame_3">
  <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 735.13 744.09"><defs><style>.a{fill:#ff0;stroke:#000;stroke-miterlimit:10;}</style></defs><title>3</title><path class="a" d="M1037.5,403.5c-79.07-14.86-332-37-332-37l-35-359-16,358-352,28,351.21,15.83L682.5,751.5l20-343.21Z" transform="translate(-302.46 -7.45)"/></svg>
  
  
   </div>

npm install svg-points
import { toPoints } from 'svg-points';
 
const circle = {
  type: 'circle',
  cx: 50,
  cy: 50,
  r: 20
}
 
const points = toPoints(circle)
 
console.log(points)