Battery fill

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/gauges/battery-fill.html
  Desc   : Battery icon charging up to a target level
  ============================================================
-->
<div class="sg-battery-fill" style="--sg-color:#2BA05A; --sg-size:110px; --sg-level:80;">
  <svg viewBox="0 0 56 28" role="img" aria-label="Battery charging">
    <title>Battery charging</title>
    <rect class="sg-battery-fill-case" x="2" y="4" width="46" height="20" rx="4" />
    <rect class="sg-battery-fill-cap" x="50" y="10" width="4" height="8" rx="1.5" />
    <rect class="sg-battery-fill-charge" x="5" y="7" width="40" height="14" rx="2" />
  </svg>
</div>
<style>
  .sg-battery-fill {
    width: var(--sg-size);
  }
  .sg-battery-fill svg {
    display: block;
    width: 100%;
  }
  .sg-battery-fill-case {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2.5;
    opacity: 0.7;
  }
  .sg-battery-fill-cap {
    fill: var(--sg-color);
    opacity: 0.7;
  }
  .sg-battery-fill-charge {
    fill: var(--sg-color);
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(calc(var(--sg-level) / 100));
    animation: sg-battery-fill-charge-up 2.4s ease-out infinite;
  }
  @keyframes sg-battery-fill-charge-up {
    0%       { transform: scaleX(0); opacity: 0.6; }
    75%, 88% { transform: scaleX(calc(var(--sg-level) / 100)); opacity: 1; }
    100%     { transform: scaleX(calc(var(--sg-level) / 100)); opacity: 0.6; }
  }
</style>