SVG бесконечная генерация текста по пути

Question

Мне попалася вот такой пример с генерацией псевдобесконечного текста в виде бегущей строки. Но внимательно оценив код я вижу, что он не беспеконечен, а длиться 30s, а потом рывком переходит в начальное положение. Мне хотелось бы создать, нечто похожее из повторящихся букв А-А-А-А, которые будуть плавно увеличиваться в размере, но я не понимаю, как его зациклить. Вот мой код.

#svg-path path {
    fill: none;
    stroke: #1d1d1b;
    stroke-miterlimit: 10;
}

.guide {
    fill: none;
    stroke: #e6e6e6;
    stroke-width: 1;
}

.marq {
    fill: #111;
    font-family: "Arial", sans-serif;
    letter-spacing: 2px;
}

<svg id="svg-path" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="800" height="800">

        <path id="spiral" class="guide" d="M432,800C183.31,815.91-10,544,67,270,131.82,102.38,258.32,9.73,437,29c102,11,223.49,156.94,63,221"/>


        <text class="marq" font-size="10" dominant-baseline="middle">
            <textPath href="#spiral" startOffset="0%" side="right">
                А-А-А-А-А-А-А-А-А-А-А-А-А-А-А-А-А-А-А-А-А
                <animate attributeName="startOffset" from="100%" to="0%" dur="8s" repeatCount="indefinite" calcMode="linear"/>
            </textPath>
            <animate attributeName="font-size" from="12" to="50" dur="8s" repeatCount="indefinite" calcMode="linear"/>
            <animate attributeName="opacity" values="1;0" dur="8s" repeatCount="indefinite" calcMode="linear"/>
        </text>
</svg>

Сейчас все буквы одновременно увиличиваються в размере, а мне надо что б в начале они были минимальные, а чем дальше путь проходили тем больше в размере становились. Также буду благодарен если кто-то подскажет как повернуть начальные буквы по вертикали (зеркально отразить), чтобы оно нормально смотрелось. Пробовал через <text class="marq" font-size="10" transform="scale(1,-1) translate(0,-800)"> но это что-то не то.

БЛОГ НА HUSL

SVG бесконечная генерация текста по пути

Ответы (0 шт):