Анимация SVG: последовательное «плавное заполнение» вдоль пути в форме переменной ширины (GSAP, Clippath, инсульта-удале ⇐ Html

[Anonymous]

Hello Stack Overflow Community, < /p>
Я пытаюсь создать анимацию логотипа SVG для моего логотипа "Mplay", где цвет заполнения, кажется, «поток» или «нарисовать» вдоль определенных предопределенных путей в каждой форме буквы. Эффект должен соответствовать направлению, обозначаемому красными стрелками на этом изображении:




document.addEventListener('DOMContentLoaded', () => {
const flowPaths = gsap.utils.toArray(".flow-path");
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const restartBtn = document.getElementById('restartBtn');

if (!flowPaths.length) {
console.error("No .flow-path elements were found.");
gsap.set([playBtn, pauseBtn, restartBtn], { pointerEvents: "none", opacity: 0.5 });
return;
}

// Preparing paths (same as before)
flowPaths.forEach(path => {
try {
const length = path.getTotalLength();
if (isNaN(length) || length

Подробнее здесь: https://stackoverflow.com/questions/795 ... -shape-gsa