Bar race

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/charts/chart-bar-race.html
  Desc   : Horizontal bars racing to their values with spring stagger
  ============================================================
-->
<div class="sg-chart-bar-race" style="--sg-color:#7F77DD; --sg-size:260px; --sg-duration:0.9s;">
  <svg viewBox="0 0 240 118" role="img" aria-label="Bar chart: Python 92, Rust 78, Go 64, TypeScript 55, C 38">
    <title>Language popularity bar chart</title>
    <g class="sg-chart-bar-race-row" style="--sg-i:0">
      <text class="sg-chart-bar-race-name" x="48" y="20">Python</text>
      <rect class="sg-chart-bar-race-bar" x="54" y="10" width="147" height="12" rx="3" />
      <text class="sg-chart-bar-race-val" x="206" y="20">92</text>
    </g>
    <g class="sg-chart-bar-race-row" style="--sg-i:1">
      <text class="sg-chart-bar-race-name" x="48" y="42">Rust</text>
      <rect class="sg-chart-bar-race-bar" x="54" y="32" width="125" height="12" rx="3" />
      <text class="sg-chart-bar-race-val" x="184" y="42">78</text>
    </g>
    <g class="sg-chart-bar-race-row" style="--sg-i:2">
      <text class="sg-chart-bar-race-name" x="48" y="64">Go</text>
      <rect class="sg-chart-bar-race-bar" x="54" y="54" width="102" height="12" rx="3" />
      <text class="sg-chart-bar-race-val" x="161" y="64">64</text>
    </g>
    <g class="sg-chart-bar-race-row" style="--sg-i:3">
      <text class="sg-chart-bar-race-name" x="48" y="86">TypeScript</text>
      <rect class="sg-chart-bar-race-bar" x="54" y="76" width="88" height="12" rx="3" />
      <text class="sg-chart-bar-race-val" x="147" y="86">55</text>
    </g>
    <g class="sg-chart-bar-race-row" style="--sg-i:4">
      <text class="sg-chart-bar-race-name" x="48" y="108">C</text>
      <rect class="sg-chart-bar-race-bar" x="54" y="98" width="61" height="12" rx="3" />
      <text class="sg-chart-bar-race-val" x="120" y="108">38</text>
    </g>
  </svg>
</div>
<style>
  .sg-chart-bar-race {
    width: var(--sg-size);
  }
  .sg-chart-bar-race svg {
    display: block;
    width: 100%;
    font-family: inherit;
  }
  .sg-chart-bar-race-name {
    font-size: 10px;
    text-anchor: end;
    fill: currentColor;
    opacity: 0.75;
  }
  .sg-chart-bar-race-bar {
    fill: var(--sg-color);
    transform-box: fill-box;
    transform-origin: left center;
    animation: sg-chart-bar-race-grow var(--sg-duration) cubic-bezier(0.3, 1.35, 0.5, 1) both;
    animation-delay: calc(var(--sg-i) * var(--sg-duration) * 0.18);
  }
  .sg-chart-bar-race-row:nth-of-type(2) .sg-chart-bar-race-bar { opacity: 0.85; }
  .sg-chart-bar-race-row:nth-of-type(3) .sg-chart-bar-race-bar { opacity: 0.7; }
  .sg-chart-bar-race-row:nth-of-type(4) .sg-chart-bar-race-bar { opacity: 0.55; }
  .sg-chart-bar-race-row:nth-of-type(5) .sg-chart-bar-race-bar { opacity: 0.4; }
  .sg-chart-bar-race-val {
    font-size: 10px;
    font-weight: 600;
    fill: currentColor;
    animation: sg-chart-bar-race-fade 0.3s ease both;
    animation-delay: calc(var(--sg-i) * var(--sg-duration) * 0.18 + var(--sg-duration) * 0.75);
  }
  @keyframes sg-chart-bar-race-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes sg-chart-bar-race-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
</style>