Только SVG (без JS) - анимация линии / пути

Question

Я не могу обдумать это ... Я не могу добавить разметку в проекте, только CSS (по многим скучным причинам, с которыми я работаю удаленно).

Конечный клиент хочет, чтобы анимация загрузки его траектории логотипа была нарисована, но не линейно, более просто-медленно (медленно-быстро-медленно). Чтобы проиллюстрировать, что я имею в виду, посмотрите jsfiddle, который я сделал: https://jsfiddle.net/tobzzzz/djf7oth2/ (их логотип немного похож на речевой знак, для демонстрации я сделал круг для удобства).

Логотип будет располагаться поверх фонового изображения, а не белого / сплошного цветного фона, поэтому мое решение для скрипки не будет работать в двух слоях. Я добавил светло-серый фон, чтобы продемонстрировать, как он не работает.

Решением IDEAL будет только SVG (с использованием SVG-анимации, а не CSS-анимации), я бы затем преобразовал его в данные и поместил бы в качестве фонового изображения.

Если это невозможно сделать только с помощью SVG-анимации, я хотел бы знать, можно ли это сделать с помощью SVG и CSS. Но это абсолютно 100% не может быть JS.

Есть хорошие идеи?

body {
  background: #eee
}

.black {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash 4s linear infinite;
}

.white {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash2 4s ease-in-out infinite;
}

@keyframes dash {
  80% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash2 {
  100% {
    stroke-dashoffset: 0;
  }
}

<svg class="path" width="84" height="84" xmlns="http://www.w3.org/2000/svg">
      <path class="black" fill="none" stroke="#000000" stroke-width="4" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
      <path class="white" fill="none" stroke="white" stroke-width="5" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
    </svg>

Answer 1

Вам нужно анимировать stroke-dasharray, а не только stroke-dashoffset. Вы можете добавить несколько чисел к значению тире, определяя переменную длину штрихов и пробелов. Таким образом, если вы обведете r="40", у вас будет окружность 251,4,

• 0 251.4 - длина хода 0 и зазор по всей окружности
• 125.7 125.7 - ход полукруга и разрыв полукруга
• и затем снова уменьшите длину хода

В то же время переместите начало обводки по кругу, анимировав смещение.

Существует множество тонких настроек, которые вы можете выполнить с другими промежуточными значениями, распределив keyTimes по-разному и используя функции замедления. Вот базовый вариант с линейной анимацией:

<svg width="84" height="84">
    <circle r="40" cx="42" cy="42" style="fill: none;stroke: black;stroke-width: 4;">
        <animate attributeName="stroke-dasharray" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0 251.4;125.7 125.7;0 251.4" />
        <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0;-100;-251.4" />
    </circle>
</svg>

Answer 2

Вы смотрели на это?

https://maxwellito.github.io/vivus-instant/

Вы можете перетащить в любой SVG, и он автоматически ограничивает возможности анимации.