Progress Steps SVG illustration, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="blue" data-name="Blue"><path d="M641 429c-69 6-59 114 10 107 68-7 59-113-10-107z" fill="#0183fc" stroke="#0183fc"/><path d="M109 429c-69 5-62 112 8 107 68-5 62-111-8-107z" fill="#0183fc" stroke="#0183fc"/><path d="M378 429c-69 4-63 111 6 107 68-4 64-111-6-107z" fill="#0183fc" stroke="#0183fc"/><path d="M644 416c87-2 89 131 4 133-87 2-90-131-4-133zm79 56c-15-89-143-89-154 1l-123-1v20h123c13 92 144 90 154-1z" fill="#0183fc" stroke="#0183fc"/><path d="M316 492v-20l-138 1v19z" fill="#0183fc" stroke="#0183fc"/><path d="M965 486v-6z" fill="#0183fc" stroke="#0183fc"/></g><g id="mist" data-name="Mist"><path d="M965 486v-6c4-62-104-71-105 2-1 70 105 70 105 4z" fill="#e0e2e6" stroke="#e0e2e6"/><path d="M847 473l-124-1v19l124 1z" fill="#e0e2e6" stroke="#e0e2e6"/></g><g id="navy" data-name="Navy"><path d="M109 429c70-4 76 102 8 107-70 5-77-102-8-107zm69 63v-19c-12-80-131-71-131 10 0 79 113 92 131 9z" fill="#0d2a55" stroke="#0d2a55"/><path d="M378 429c70-4 74 103 6 107-69 4-75-103-6-107zm-62 43v20c7 74 123 74 130 0v-20c-11-74-113-74-130 0z" fill="#0d2a55" stroke="#0d2a55"/><path d="M847 473v19c20 82 131 71 131-9 0-79-109-94-131-10zm118 7v6c0 66-106 66-105-4 1-73 109-64 105-2z" fill="#0d2a55" stroke="#0d2a55"/><path d="M644 416c-86 2-83 135 4 133 85-2 83-135-4-133zm-3 13c69-6 78 100 10 107-69 7-79-101-10-107z" fill="#0d2a55" stroke="#0d2a55"/></g></svg>

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

import ProgressStepsSvg from "./progress-steps.jsx"; // from the React tab above

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