Progress Ring SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/QPPcGt_t4vEU/amnt.svg" alt="Progress Ring" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="turquoise" data-name="Turquoise"><path d="M530 58c-45 7-48 75-6 88 15 5 31 4 45 6 28 5 56 13 81 24 69 30 128 82 164 149 82 153 42 337-95 442-138 105-330 90-452-30-57-57-93-134-99-213-1-13 0-28-5-41-10-29-48-38-72-19-29 23-14 95-6 128 78 347 527 460 758 189 112-133 136-318 63-475-57-122-170-210-300-239-24-6-52-12-76-9z" fill="#02acb1" stroke="#02acb1"/></g><g id="navy" data-name="Navy"><path d="M501 45c-201 9-373 143-424 338-11 40-17 82-15 122 11 253 205 443 461 438 244-5 449-213 438-460-11-245-210-449-460-438zm4 12c-33 18-28 68-4 91-16 2-32 2-48 5-67 12-132 44-180 92-51 50-86 112-100 182-2 12-6 25-5 38-26-28-65-31-92-3-1-36 10-75 22-108 49-139 166-247 309-283 32-8 66-15 98-14zm25 1c24-3 52 3 76 9 130 29 243 117 300 239 73 157 49 342-63 475-231 271-680 158-758-189-8-33-23-105 6-128 24-19 62-10 72 19 5 13 4 28 5 41 6 79 42 156 99 213 122 120 314 135 452 30 137-105 177-289 95-442-36-67-95-119-164-149-25-11-53-19-81-24-14-2-30-1-45-6-42-13-39-81 6-88zM492 160c182-8 344 127 353 313 9 184-132 339-314 352-184 14-340-132-352-312-12-179 133-344 313-353z" fill="#012246" stroke="#012246"/></g><g id="mist" data-name="Mist"><path d="M505 57c-32-1-66 6-98 14-143 36-260 144-309 283-12 33-23 72-22 108 27-28 66-25 92 3-1-13 3-26 5-38 14-70 49-132 100-182 48-48 113-80 180-92 16-3 32-3 48-5-24-23-29-73 4-91z" fill="#dadadc" stroke="#dadadc"/></g></svg>

.progress-ring {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/QPPcGt_t4vEU/amnt.svg");
  background-size: contain;
}

.progress-ring {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/QPPcGt_t4vEU/amnt.svg") center / contain no-repeat;
}

import ProgressRingSvg from "./progress-ring.jsx"; // from the React tab above

<ProgressRingSvg width={48} height={48} />