<div class="diagram" role="image" aria-label="100 blue simple illustration that represent a person. 57 of those 100 is white with a blue border, while 43 are filled in to represent 1% market share">

</div>

.diagram {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 1vw;
  padding: 3vw;
}

svg {
  color: #089ce7;
}

const filled = `
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`;

const line = `
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>
`;

const parent = document.querySelector(".diagram");

const filledCount = 43;
const lineCount = 57;

let filledIndex = 0;
let lineIndex = 0;

for (filledIndex; filledIndex < filledCount; filledIndex++) {
  parent.insertAdjacentHTML("beforeend", filled);
}

for (lineIndex; lineIndex < lineCount; lineIndex++) {
  parent.insertAdjacentHTML("beforeend", line);
}