Energy Meter Dashed Gradient Progress

clip.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100">
  <defs>
    <linearGradient id="gradient">
        <stop offset="0%" stop-color="#54c727" />
        <stop offset="25%" stop-color="#a9bf46" />
        <stop offset="50%" stop-color="#eccc42" />
        <stop offset="75%" stop-color="#ba3838" />
    </linearGradient>
    
    <clipPath id="clip">
      <rect x="0" y="0" rx="0" ry="4" width="10" height="100%"/>
      <rect x="20" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="40" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="60" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="80" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="100" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="120" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="140" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="160" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="180" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="200" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="220" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="240" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="260" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="280" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="300" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="320" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="340" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="360" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="380" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="400" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="420" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="440" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="460" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="480" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="500" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="520" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="540" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="560" y="00" rx="0" ry="4" width="10" height="100%"/>
      <rect x="580" y="00" rx="0" ry="4" width="10" height="100%"/>
    </clipPath>
  </defs>
  
<rect fill="black" width="100%" height="100%" />
<rect fill="url(#gradient)" clip-path="url(#clip)" width="100%" height="100%" />
<rect fill="grey" clip-path="url(#clip)" x="80%" width="100%" height="100%" />
</svg>

line.svg

pattern.svg