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

[Anonymous]

Hello Stack Overflow Community, < /p>
Я пытаюсь создать анимацию логотипа SVG для моего логотипа "Mplay", где цвет заполнения, кажется, «поток» или «нарисовать» вдоль определенных предопределенных путей в каждой форме буквы. Эффект должен соответствовать направлению, обозначаемому красными стрелками на этом изображении:
Ссылка на ваше изображение с красными стрелками
вот анимация GIF того, чего я пытаюсь достичь: https://i.sstatic.net/82kjhqzt.gifобразно https://i.sstatic.net/7g0txnek.gifобразно Parts. clip-path = "url (#pclip)" ... />).
Техника анимации: < /p>
Я использую GSAP для создания временной шкалы. /> Стилизация для эффекта заполнения: < /p>
Элементы .flow-path имеют заполнение: нет;. < /p>
Они стилизованы очень большой шириной инсульта (например, 50-60px, регулируемые через CSS-varible--удар) и ходом: #e50914; (красный) Для моделирования цвета заполнения. < /p>
Я использую ход-linecap: square; Чтобы получить острый «передний край» заполнения. В первую очередь из-за переменной ширины ударов/форм логотипа. Глючи: < /p>
Маленькие квадраты или блоки цвета, которые преждевременно появляются в острых углах потока патча (даже с инсультом-линией: круглый). < /p>
Части заполнения, появляющиеся «наружные». Предполагаемый путь потока рядом с краями Clippath. Области. < /p>
Я пытался использовать различные значения-ширина-для конкретных проблемных путей с помощью CSS (ширина инсульта: Calc (var (-ширина инсульта) * 0,8);), но поиск правильного баланса для каждого сегмента чрезвычайно утомительно и не полностью устраняет проблемы. Я также пробовал инсульт-линейный: круглый, который слегка помогает на концах, но не решает основную проблему в углах или различной ширине. Дизайн? Метод был бы очень признателен! Спасибо.

Код: Выделить всё

MPLAY Logo - GSAP (Individual ClipPaths)

:root {
/* -- Basic stroke width -- */
--stroke-width: 50; /* Tunable value */
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #141414;
font-family: Arial, sans-serif;
color: #fff;
}
.logo-container {
width: 90%;
max-width: 750px;
aspect-ratio: 1107 / 317.365;
position: relative;
}

#mplay-logo-svg {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}

/* Style for animated "flow" paths */
.flow-path {
fill: none;
stroke: #E50914;
stroke-width: var(--stroke-width, 50);
stroke-linecap: square;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
visibility: hidden;
}

/* --- OPTIONAL: Specific widths for some paths --- */
/* If the default width is not enough, you can adjust it here */
#M1-way { stroke-width: calc(var(--stroke-width, 50) * 2.75); }
#M2-way { stroke-width: calc(var(--stroke-width, 50) * 1.75); }
#P-way { stroke-width: calc(var(--stroke-width, 50) * 0.8); }
#A1-way, #A2-way { stroke-width: calc(var(--stroke-width, 50) * 0.85); }
#Y1-way { stroke-width: calc(var(--stroke-width, 50) * 0.8); }
#Y2-way { stroke-width: calc(var(--stroke-width, 50) * 0.75);  }

/* --- End of optional widths --- */

.controls {
margin-top: 30px;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #E50914;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 0 10px;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #f40612;
}
button:disabled {
background-color: #555;
cursor: not-allowed;
}





MPLAY Logo - GSAP (Individual ClipPaths)


























































Play
Pause
Restart





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 

Подробнее здесь: [url]https://stackoverflow.com/questions/79543399/svg-animation-consistent-flowing-fill-along-path-in-variable-width-shape-gsa[/url]