template.svg

<svg width="400" height="70" xmlns="http://www.w3.org/2000/svg">
    <style>
        @keyframes grow {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .grow {
            animation: grow 2s forwards;
            animation-delay: calc(var(--delay) * 0.2s);
        }
    </style>


    <circle cx="30" cy="30" r="20" fill="{color1}" class="grow" style="--delay: 0; opacity: 0"/>
    <text x="30" y="30" text-anchor="middle" fill="white" font-size="12" dy=".3em" class="grow" style="--delay: 0.7; opacity: 0">{number1}</text>

    <circle cx="80" cy="30" r="20" fill="{color2}" class="grow" style="--delay: 1; opacity: 0"/>
    <text x="80" y="30" text-anchor="middle" fill="white" font-size="12" dy=".3em" class="grow" style="--delay: 1.6; opacity: 0">{number2}</text>

    <circle cx="130" cy="30" r="20" fill="{color3}" class="grow" style="--delay: 2; opacity: 0"/>
    <text x="130" y="30" text-anchor="middle" fill="white" font-size="12" dy=".3em" class="grow" style="--delay: 2.5; opacity: 0">{number3}</text>

    <circle cx="180" cy="30" r="20" fill="{color4}" class="grow" style="--delay: 3; opacity: 0"/>
    <text x="180" y="30" text-anchor="middle" fill="white" font-size="12" dy=".3em" class="grow" style="--delay: 3.4; opacity: 0">{number4}</text>

    <circle cx="230" cy="30" r="20" fill="{color5}" class="grow" style="--delay: 4; opacity: 0"/>
    <text x="230" y="30" text-anchor="middle" fill="white" font-size="12" dy=".3em" class="grow" style="--delay: 4.3; opacity: 0">{number5}</text>

    <circle cx="280" cy="30" r="20" fill="{color6}" class="grow" style="--delay: 5; opacity: 0"/>
    <text x="280" y="30" text-anchor="middle" fill="white" font-size="12" dy=".3em" class="grow" style="--delay: 5.2; opacity: 0">{number6}</text>

    <circle cx="370" cy="30" r="20" fill="{color7}" class="grow" style="--delay: 10; opacity: 0"/>
    <text x="370" y="30" text-anchor="middle" fill="white" font-size="12" dy=".3em" class="grow" style="--delay: 10.1; opacity: 0">{number7}</text>
</svg>