Tally Marks

<!-- Tally Marks — strokes draw in one after another, grouped in fives -->
<div class="nuda-sc2-tally" role="img" aria-label="11 wins this season">
  <svg class="nuda-sc2-tally__marks" viewBox="0 0 74 24" aria-hidden="true"
       fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round">
    <line class="nuda-sc2-tally__mark" x1="4" y1="4" x2="4" y2="20" style="--i:0;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="10" y1="4" x2="10" y2="20" style="--i:1;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="16" y1="4" x2="16" y2="20" style="--i:2;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="22" y1="4" x2="22" y2="20" style="--i:3;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="2" y1="20" x2="24" y2="4" style="--i:4;--len:28" />
    <line class="nuda-sc2-tally__mark" x1="34" y1="4" x2="34" y2="20" style="--i:5;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="40" y1="4" x2="40" y2="20" style="--i:6;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="46" y1="4" x2="46" y2="20" style="--i:7;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="52" y1="4" x2="52" y2="20" style="--i:8;--len:16" />
    <line class="nuda-sc2-tally__mark" x1="32" y1="20" x2="54" y2="4" style="--i:9;--len:28" />
    <line class="nuda-sc2-tally__mark" x1="66" y1="4" x2="66" y2="20" style="--i:10;--len:16" />
  </svg>
  <span class="nuda-sc2-tally__num">11</span>
</div>

.nuda-sc2-tally {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.nuda-sc2-tally__marks {
  width: 74px;
  height: 24px;
}

.nuda-sc2-tally__mark {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: _nuda-sc2tally-draw .35s ease-out forwards;
  animation-delay: calc(var(--i) * 90ms);
}

.nuda-sc2-tally__num {
  font: 800 20px ui-sans-serif,system-ui;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

@keyframes _nuda-sc2tally-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sc2-tally__mark {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}