Почему не работает stroke-dasharray, stroke-dashoffset svg?

Question

[Alexander3928]

Мне нужно сделать плавность отрисовки svg иконки. Задаю stroke-dashoffset и stroke-dasharray, но svg не как не меняется.

https://codepen.io/Alexxxsander/pen/XWYpbBK

Comments

[Вадим]

Ну а Вы пытались гуглить хотя бы?
Выглядит как "набросал не глядя, сделайте за меня".

Почему не работает

Потому что к svg тут никакие стили не нужно применять. А нужно к path:

svg path {
  stroke-dasharray: 55;
  stroke-dashoffset: 55;
  stroke-width: 2px;
  stroke: #00ccbb;
  animation: strokeanim 1s alternate infinite;
}

@keyframes strokeanim {
    to { stroke-dashoffset: 0; }
}

Answer 1

[Максим]

Путь для подобной анимашки не должен иметь много точек а их достаточно ТРИ вот что я и сделал и для удобства выбрал квадратную форму самого SVG, делается это так:
<svg viewBox="0 0 400 400"></svg>
После этого наш svg станет квадратным по соотношению сторон
Позже зададим размер видимой области той в которой удобно будет рисовать и пока пусть будет опять width и height = 400px
и ставим точки на нашем канвасе - 1) M40,100 2) 200,390 3) 390,10 что и будет как раз калочка и для декорации я добавил stroke-linejoin и stroke-linecap это закругления на концах линии и на стыке и потом уже анимация

но Нам для этого надо узнать длину пути (path) и делается это на javascript методом: path.getTotalLength(); и выводим эту штуку в cansole.log

вызываем метод анимации а их два - анимация увеличения от 0 до длины пути + анимашка прозрачности, в сумме получаем вот это =>
если не успели увидить анимашку нажмите rerun в окне сниппета