Striped Progress Bar SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-2j-zwABX19e/amnt.svg" alt="Striped Progress Bar" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="mist" data-name="Mist"><path d="M520 569c85 0 170 0 256 0 24 0 49 0 74 0 16 0 33 1 49 0 35-3 62-35 62-69s-25-63-58-68c-17-3-36-1-54-1-25 0-50 0-74 0-86 0-171 0-256 0 36 27 45 79 20 117-6 8-13 14-19 21z" fill="#dfe1e5" stroke="#dfe1e5"/><path d="M419 431h-22l-127 138h22c6-13 22-23 31-34 14-15 91-93 96-104z" fill="#dfe1e5" stroke="#dfe1e5"/><path d="M201 569c12-15 27-29 40-43 21-22 42-45 63-67 7-8 21-18 25-28l-23 1-127 137z" fill="#dfe1e5" stroke="#dfe1e5"/><path d="M502 440l-16-6-126 135h22z" fill="#dfe1e5" stroke="#dfe1e5"/><path d="M114 566c9-13 22-23 32-35 24-25 47-51 71-76 6-7 17-15 21-24l-23 1c-4 10-16 18-23 26-14 15-90 92-94 102 5 3 10 6 16 6z" fill="#dfe1e5" stroke="#dfe1e5"/><path d="M536 501c1-6 1-16-3-21-14 19-76 75-82 89h21z" fill="#dfe1e5" stroke="#dfe1e5"/><path d="M67 520l82-89-23 1-62 67c0 7 0 15 3 21z" fill="#dfe1e5" stroke="#dfe1e5"/></g><g id="midnight" data-name="Midnight"><path d="M596 414c-92 2-185 1-277 1-46 0-92 0-138 0-22 0-46-3-67 1-17 3-34 13-45 26-40 44-23 117 32 138 18 8 38 6 58 6 92 0 184 0 277 0 92 0 185 0 278 0 40 0 81 0 122 0 25 0 54 4 79-3 17-5 33-15 44-29 23-30 25-74 2-105-27-37-62-33-103-35-34-1-69 1-102 1-54-1-107-2-160-1zM520 569c6-7 13-13 19-21 25-38 16-90-20-117 85 0 170 0 256 0 24 0 49 0 74 0 18 0 37-2 54 1 33 5 58 34 58 68s-27 66-62 69c-16 1-33 0-49 0-25 0-50 0-74 0-86 0-171 0-256 0zM149 431l66 1 23-1 68 1 23-1h68 22c19 0 50-4 67 3l16 6c14 7 30 24 31 40 4 5 4 15 3 21 2 35-29 66-64 68h-21-69-22-68-22-69-22c-14 0-55 4-65-3-6 0-11-3-16-6-15-7-28-24-31-40-3-6-3-14-3-21-1-33 28-68 62-67z" fill="#222b35" stroke="#222b35"/></g><g id="blue" data-name="Blue"><path d="M486 434c-17-7-48-3-67-3-5 11-82 89-96 104-9 11-25 21-31 34h68z" fill="#0685fb" stroke="#0685fb"/><path d="M306 432l-68-1c-4 9-15 17-21 24-24 25-47 51-71 76-10 12-23 22-32 35 10 7 51 3 65 3z" fill="#0685fb" stroke="#0685fb"/><path d="M397 431h-68c-4 10-18 20-25 28-21 22-42 45-63 67-13 14-28 28-40 43h69z" fill="#0685fb" stroke="#0685fb"/><path d="M533 480c-1-16-17-33-31-40l-120 129h69c6-14 68-70 82-89z" fill="#0685fb" stroke="#0685fb"/><path d="M215 432l-66-1-82 89c3 16 16 33 31 40 4-10 80-87 94-102 7-8 19-16 23-26z" fill="#0685fb" stroke="#0685fb"/><path d="M472 569c35-2 66-33 64-68z" fill="#0685fb" stroke="#0685fb"/><path d="M64 499l62-67c-34-1-63 34-62 67z" fill="#0685fb" stroke="#0685fb"/></g></svg>

.striped-progress-bar {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-2j-zwABX19e/amnt.svg");
  background-size: contain;
}

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

import StripedProgressBarSvg from "./striped-progress-bar.jsx"; // from the React tab above

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