Arc SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="coral" data-name="Coral"><path d="M506 354c-95 3-189 29-272 75-42 23-183 111-181 163 2 38 47 40 74 28 12-6 23-15 33-24 30-28 59-56 94-79 78-50 172-82 265-78 94 4 183 31 261 85 34 23 61 53 93 80 15 13 34 24 55 24 26 0 48-21 41-48-12-50-143-132-188-156-83-44-181-72-275-70z" fill="#fc7c5c" stroke="#fc7c5c"/></g><g id="black" data-name="Black"><path d="M497 342c-97 5-193 33-278 81-46 26-147 93-171 140-6 12-8 25-6 37 11 57 83 43 115 15 33-27 60-58 96-82 80-54 177-86 275-82 94 4 186 39 262 95 32 24 64 65 97 83 44 23 113 5 93-56-17-53-147-135-196-161-87-46-189-74-287-70zm9 12c94-2 192 26 275 70 45 24 176 106 188 156 7 27-15 48-41 48-21 0-40-11-55-24-32-27-59-57-93-80-78-54-167-81-261-85-93-4-187 28-265 78-35 23-64 51-94 79-10 9-21 18-33 24-27 12-72 10-74-28-2-52 139-140 181-163 83-46 177-72 272-75z" fill="#232121" stroke="#232121"/></g></svg>

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

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

import ArcSvg from "./arc.jsx"; // from the React tab above

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