JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<svg width="200" height="20">
  <g fill="none" fill-rule="evenodd">
    <rect
      id="100%"
      fill="#FFFFFF"
      fill-rule="nonzero"
      x="0"
      y="0"
      width="400"
      height="10"
    ></rect>
    <g stroke="red" stroke-linecap="square">
      <path
        d="M-6.121 10.066 4.145-.201M-.95 10.066 9.319-.202M4.224 10.066 14.49-.202M9.396 10.066 19.663-.202M14.569 10.066 24.836-.202M19.74 10.066 30.009-.202M24.914 10.066 35.18-.202M30.086 10.066 40.353-.202M35.259 10.066 45.526-.202M40.43 10.066 50.698-.202M45.604 10.066 55.87-.202M50.777 10.066 61.043-.201M55.949 10.066 66.216-.202M61.122 10.066 71.389-.202M66.294 10.066 76.56-.202M71.467 10.066 81.734-.202M76.639 10.066 86.906-.202M81.812 10.066 92.079-.202M86.984 10.066 97.25-.202M92.157 10.066 102.424-.202M97.329 10.066 107.596-.202M102.502 10.066 112.769-.202M107.675 10.066 117.94-.201M118.02 10.066 128.287-.202M128.365 10.066 138.632-.202M138.71 10.066 148.977-.202M149.055 10.066 159.322-.202M159.4 10.066 169.667-.202M169.745 10.066 180.012-.202M180.09 10.066 190.357-.202M190.435 10.066 200.702-.202M112.847 10.066 123.114-.202M123.192 10.066 133.459-.202M133.537 10.066 143.804-.202M143.882 10.066 154.149-.202M154.227 10.066 164.494-.202M164.573 10.066 174.839-.201M174.918 10.066 185.185-.202M185.263 10.066 195.53-.202M195.608 10.066 205.875-.202"
      />
    </g>
    <rect
      id="background"
      fill="#FFFFFF"
      x="0"
      y="10"
      width="200"
      height="10"
    ></rect>
    <rect
      id="current"
      fill="#000000"
      x="0"
      y="10"
      width="92"
      height="10"
    ></rect>
  </g>
</svg>