Как реализовать сложный динамический фронт?

Question

Luka Tarkhnishvili @Zorner

Фронтенд

Как реализовать сложный динамический фронт?

Нужно вывести рефералы динамический и посчитать скриптом кто сколько человек пригласил.

Посоветуйте как построить эту схему.

у меня что то такое:

<div class="referrals">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
                <span>10</span>
            <div class="referral-sub1">
                <div class="referral-sub2">
                    <div class="referral-sub3">
                        <div class="referral-sub4">
                            <div class="firstPerson">
                                <span class="far fa-user"></span>
                                <span>YOU</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

.referrals {
    display: flex;
    margin-top: 160px;
    margin-left: 80px;
    border-radius: 50%;
    height: 760px;
    width: 760px;
    border: 2px dotted #7a7a7a; 
    border-width:3px;
    align-items: center;
    justify-content: center;
 }

 .referrals > span {
    display: block;
    position: absolute;
    margin-left: 20%;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    color: #5766c2;
    line-height: 40px;
    border: #5766c2 solid 1px;
 }

 .referral-sub1 {
    border-radius: 50%;
    border: 2px dotted #7a7a7a;
    border-width:3px;
    height: 630px;
    width: 630px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .referral-sub2 {
    border-radius: 50%;
    border: 2px dotted #7a7a7a;
    border-width:3px;
    height: 500px;
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .referral-sub3 {
    border-radius: 50%;
    border: 2px dotted #7a7a7a;
    border-width:3px;
    height: 370px;
    width: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .referral-sub4 {
    border-radius: 50%;
    border: 2px dotted #7a7a7a;
    border-width:3px;
    height: 240px;
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .firstPerson {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: #5867c3;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
 }

 .firstPerson span:first-child {
     font-size: 30px;
     padding-bottom: 8px;
 }

 .bottom-text {
     font-size: 15px;
     padding: 70px 80px 0 80px;
     color: #7a7a7a;
 }