Анимация SVG-штрих-дашаррей: как создать голову кометы/капли + конечный исчезающий хвост на пути с закругленным прямоуго ⇐ CSS

[Anonymous]

Минимальное окружение:

React/Next.js + Tailwind, но проблема в чистом SVG/CSS

Форма — скругленный прямоугольник (прямоугольник с rx)

Я анимирую смещение штриха-dashoffset с помощью вычисленного --trace-len (см. ниже), поэтому цикл не имеет швов.
Цель:

По сути, я изо всех сил пытаюсь создать след для элемента боковой панели на своем веб-сайте. Мне удалось заставить след следовать за боковой панелью, как хотелось, но я изо всех сил пытаюсь реализовать желаемый дизайн.

Я хочу, чтобы след выглядел как капля воды со светящейся толстой головой и струящимся хвостом позади нее.

Голова капли — круглая бусинка (яркая сердцевина + мягкое свечение, постепенно рассеивающееся)

Хвост — стекает за головой (тоньше, тусклее и уменьшается) (хвост) должен исчезнуть)

Голова и хвост должны оставаться выровненными по фазе и не вызывать «сброс/сбой»

Должен поддерживаться CSS (без SMIL animateMotion, без JS для каждого кадра) (если нет необходимости)
Что я уже пробовал:

• Пробовал задержку анимации или --trace-start фазовые сдвиги, вызывающие артефакты (хвост иногда появляется впереди/сзади из-за симметрии двух тире)
• Попробовал движущийся с SMIL animateMotion, но это было ненадежно и привело к неподвижному кругу.
• Текущая реализация использует очень короткое тире для головы и более длинное тире для хвоста; выглядит лучше, но не «струйка капель воды»

КОД:

Текущая реализация svg в page.tsx:

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

{/* glow under everything */}


{/* tail echo behind core (phase-lagged via CSS delay) */}


{/* crisp core on top */}

Текущий файл globals.css (где фактически происходит анимация)

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

/* PROOF: red outline, stroke-width 3, rounded linecap */
.zibio-filter-trace-rect {
filter:
drop-shadow(0 0 6px color-mix(in oklab, var(--trace-glow) 28%, transparent))
drop-shadow(0 0 16px color-mix(in oklab, var(--trace-glow) 14%, transparent));
stroke-width: 4 ;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
shape-rendering: geometricPrecision;
stroke-dasharray:
var(--trace-dash, calc(var(--trace-len) / 9))
var(--trace-gap,  calc((var(--trace-len) - 2 * var(--trace-dash, calc(var(--trace-len) / 9))) / 2))
var(--trace-dash, calc(var(--trace-len) / 9))
var(--trace-gap,  calc((var(--trace-len) - 2 * var(--trace-dash, calc(var(--trace-len) / 9))) / 2));
/* dash length, gap length */
opacity: 0.9 ;
animation: zibio-trace-run 33s linear infinite ;
animation-timing-function: linear;
}

@keyframes zibio-trace-run {
from { stroke-dashoffset: var(--trace-start, 0px); }
to { stroke-dashoffset: calc(-1 * (var(--trace-start, 0px) - var(--trace-len))); }
}

.zibio-trace-layer,
.zibio-filter-trace-svg {
overflow: visible;
}

.zibio-filter-sheet {
--trace-stroke: var(--accent);
--trace-glow: var(--glow-color, var(--accent));
}

.zibio-filter-trace-rect {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Glow: thicker + blurred, driven by --trace-glow */
/* Glow follows the core segment, slightly longer and softer */
.zibio-filter-trace-glow {
--trace-dash: calc(var(--trace-len) / 370); /* longer than core*/
stroke: var(--trace-glow);
stroke-width: 6.0;
opacity: 0.22; /*kept faint for embedded feel*/
stroke-linecap: round;
}

/* Core (the head) : slightly thicker + brighter on top */
.zibio-filter-trace-core {
--trace-dash: calc(var(--trace-len) / 370);  /* shorter than glow */
stroke: var(--trace-stroke);
stroke-width: 3.2;
opacity: 0.98;
}

/* Tail: thinner + dimmer, slightly phase-lagged (behind) */
.zibio-filter-trace-tail {
--trace-dash: calc(var(--trace-len) / 28);  /* shortest */
stroke: var(--trace-stroke);
stroke-width: 1.05;
opacity: 0.30;
}

Текущий результат:

Пожалуйста, посмотрите первое прикрепленное изображение. Вы можете видеть мою маленькую «голову», которая светится ярче (ядро трассировки в globals.css), есть также трассировочное свечение, но его трудно увидеть, оно покрывает ту же область, что и голова, но это НЕ то, что оно должно делать (см. цель выше, оно должно по существу покрывать голову и хвост и уменьшаться, если цель можно достичь без него, это тоже хорошо), а затем вы можете увидеть длинный хвост, который имеет меньшую непрозрачность и менее яркий, но опять же, это не должно быть так, оно не должно быть однородным.
Техническое предложение:

есть ли способ в чистом SVG/CSS заставить хвост исчезать по всей его длине (градиент после тире) во время анимации штриха-тире, без использования путей движения?

Как я могу создать бусинообразную голову + конический хвост, где толщина вдоль хвоста уменьшалась, в то время как оба движутся и ведут себя как один элемент
УЛЬТИМАТУМ:

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

Подробнее здесь: https://stackoverflow.com/questions/798 ... iling-fadi