Скрипт анимации текста неправильно масштабирается, можно ли как то это исправить?

Question

[cedFlame]

У меня есть скрипт последовательного создания текста и формирования из него фигуры, создавая такой скрипт я столкнулся с тем, что не могу сделать так чтобы при разном масштабе и разрешение у меня сохранялись все пропорции.
У меня на странице при изминение масштаба или разрешения все пропорции остаются, но я не могу настроить их в скрипте.
Вот скрипт:

<script>

        let viewchanger = ($(document).width / document.documentElement.clientWidth);
        let id;
        let i = 1;
        c = 0;
        $('.main-i').click(function () {
            if (c == 0) {
                clearInterval(id)
                i = 1
                j = 1
                let a = $('.main-i').offset();
                $('.pc-spans').empty()
                $('.p-main-i').animate({
                    opacity: '0'
                }, 500, function () {
                    $(this).text('Click to close ->').animate({
                        opacity: '1'
                    }, 500)
                })
                id = setInterval(function () {
                    if (i <= 9) {
                        append(i)
                        b = $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top + i * 13, left: a.left + (i ** 2) })
                        offset = b.offset()
                        b.css('top', '' + offset.top/18.5+'vw')
                        b.css('left', '' + offset.left/18.5+'vw')
                        animate(b, '#fff')
                        i++
                    }
                    
                    if (i >= 9) {
                        i = 1
                        f = 1
                        c = 1
                        clearInterval(id);
                    }

                }, 50)
            }
            if (c == 1) {
                for (i = 1; i <= 9; i++) {
                    b = $('.i-am-os[data-id="' + i + '"]')
                    animate(b, '#00000000')
                    b.remove()
                }
                $('.p-main-i').animate({
                    opacity: '0'
                }, 500, function () {
                    $(this).text('').animate({
                        opacity: '1'
                    }, 500)
                })
                c = 0
            }
        }
        )

        function animate(j, color) {
            j.animate({
                opacity: '1',
                color: color
            }, 500);
        }
        function append(i) {
            $('.pc-spans').append('<span data-class="span-i" data-id=' + i + ' class="i-am-os">text</span>');
        }

    </script>

Вот css:

[data-class='main-i'] {
        font-weight: 200;
        color: #3c3c3c;
top: 2vh;
        right: 2vw;
        cursor: pointer;
        background-color: #00000000;
        border: #00000000;
        font-size: 2vh;
        font-family: Ubuntu, "times new roman", times, roman, serif;
        text-decoration: none;
        position: absolute;
        margin-right: 2vw;
    }
[data-class='span-i'] {
        font-weight: 200;
        font-size: 2vh;
        font-family: Ubuntu, "times new roman", times, roman, serif;
        color: #00000000;
        opacity: 0;
        position: absolute;
        display: inline;
        cursor: pointer;
    }