Curved Ribbon SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="petrol" data-name="Petrol"><path d="M905 150c-11-31-13-66-20-98 0-3-4-24-5-25s-53 20-60 23c-59 22-121 37-183 48-87 15-309 26-363 97-20 26-21 59 0 85 3 5 18 22 24 23 1 0 39-20 46-22 62-21 130-27 195-36s131-18 196-34c36-10 72-20 107-34 16-6 50-24 63-27z" fill="#057b7c" stroke="#057b7c"/><path d="M622 808c-5-7-13-13-18-20-22-29-28-64-24-99-2-1-5-2-7-2-15 1-37 10-53 13-34 6-68 10-102 15-53 7-106 18-157 36-30 10-105 42-126 65-2 2-4 3-5 7-2 9 35 121 39 143 17-10 32-23 50-33 49-29 104-50 159-65 41-11 83-18 125-26 16-3 116-23 119-34z" fill="#057b7c" stroke="#057b7c"/><path d="M798 682c10-10 13-32 16-45 17-76-4-149-77-184-86-42-184-12-268 20-8 3-56 20-59 24-1 1-3 2-2 4 0 1 55 13 61 14 46 10 91 20 136 31 42 10 85 22 124 42 17 9 34 20 47 36 12 13 19 29 21 48 0 4-1 6 1 10z" fill="#057b7c" stroke="#057b7c"/></g><g id="aqua" data-name="Aqua"><path d="M251 224c-7 14-15 28-21 43-38 102-5 177 97 213 13 5 49 18 63 17 7 0 71-30 85-35 34-13 71-25 108-32 13-2 43-3 53-6-15-10-56-17-75-22-51-14-102-29-153-44-61-18-170-51-157-134z" fill="#62cace" stroke="#62cace"/><path d="M580 689c-4 35 2 70 24 99 5 7 13 13 18 20 6 4 17-2 23-5 43-16 86-38 118-71 50-53 20-104-34-135-18 24-41 41-67 55-17 9-35 17-54 24-8 3-19 4-26 9-1 1-2 2-2 4z" fill="#62cace" stroke="#62cace"/></g><g id="pine" data-name="Pine"><path d="M886 13c-120 54-225 75-354 92-78 11-191 19-253 72-21 18-37 44-49 69-12 27-20 55-22 84-9 107 74 148 164 171 116 29 238 44 349 92-17 42-126 81-167 91-73 18-147 21-220 38-65 15-127 37-183 73-6 3-28 17-30 22-2 6 13 52 16 62 9 33 16 68 27 101 121-85 194-101 336-129 106-22 250-56 304-161 28-56 34-132 2-187-34-57-92-66-150-83s-117-33-176-50c-41-11-84-22-124-38-18-7-35-16-52-24 12-5 23-12 35-17 42-16 88-21 132-28 74-12 147-19 220-34 61-13 121-29 178-54 52-22 45-12 35-66-6-32-11-64-18-96zm19 137c-13 3-47 21-63 27-35 14-71 24-107 34-65 16-131 25-196 34s-133 15-195 36c-7 2-45 22-46 22-6-1-21-18-24-23-21-26-20-59 0-85 54-71 276-82 363-97 62-11 124-26 183-48 7-3 59-24 60-23s5 22 5 25c7 32 9 67 20 98zM251 224c-13 83 96 116 157 134 51 15 102 30 153 44 19 5 60 12 75 22-10 3-40 4-53 6-37 7-74 19-108 32-14 5-78 35-85 35-14 1-50-12-63-17-102-36-135-111-97-213 6-15 14-29 21-43zM798 682c-2-4-1-6-1-10-2-19-9-35-21-48-13-16-30-27-47-36-39-20-82-32-124-42-45-11-90-21-136-31-6-1-61-13-61-14-1-2 1-3 2-4 3-4 51-21 59-24 84-32 182-62 268-20 73 35 94 108 77 184-3 13-6 35-16 45zM622 808c-3 11-103 31-119 34-42 8-84 15-125 26-55 15-110 36-159 65-18 10-33 23-50 33-4-22-41-134-39-143 1-4 3-5 5-7 21-23 96-55 126-65 51-18 104-29 157-36 34-5 68-9 102-15 16-3 38-12 53-13 2 0 5 1 7 2 0-2 1-3 2-4 7-5 18-6 26-9 19-7 37-15 54-24 26-14 49-31 67-55 54 31 84 82 34 135-32 33-75 55-118 71-6 3-17 9-23 5z" fill="#013134" stroke="#013134"/></g></svg>

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

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

import CurvedRibbonSvg from "./curved-ribbon.jsx"; // from the React tab above

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