I used to have to develop multiple progress shapes from scratch when working on FiveM interfaces, whether for speedometers, progress bars, etc.
until I started using a MUCH simpler method.
if the design is in Figma, just ask the designer to create the element as a stroke, preferably with a single color and with the alignment set to INSIDE. Don't use a fill.
then just copy the element as an SVG and paste it into your code editor.
the SVG will basically come with a <path>. just duplicate that path and, on the second one, add:
