JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 100 20" version="1.1">
<defs>
  <pattern id="pattern1" x="0" y="0" width="20" height="20"
         patternUnits="userSpaceOnUse" >     
      <circle cx="10" cy="10" r="5" style="fill:white" />  
   </pattern>
  <pattern id="pattern2" x="0" y="0" width="20" height="20"
         patternUnits="userSpaceOnUse" >     
      <circle cx="10" cy="10" r="9" style="fill:white" />
      <circle cx="10" cy="10" r="7" style="fill:black" />
    </pattern>
  <mask id="mask1" x="0" y="0" width="100" height="20" >
    <rect x="0" y="0"  width="100" height="20"
        style="stroke:none; fill: url(#pattern2)"/>
  </mask>    
  <mask id="mask5" x="0" y="0" width="100" height="20" >
    <rect x="0" y="0"  width="100" height="20"
        style="stroke:none; fill: url(#pattern1)"/>
  </mask>
</defs>1<rect x="0" y="0" width="500" height="20" fill="url(#pattern2)" style="fill:#2498c7; mask: url(#mask1)"/>
<rect x="0" y="0" width="90" height="20" style="fill:#2498c7; mask: url(#mask5)"/>

</svg>
</div>

CSS

body {background:#ccc; padding:10px;}
.container {width:85px; height:17px; }