Как создать рисованную SVG-анимацию с маскойCSS

Разбираемся в CSS
Ответить
Гость
 Как создать рисованную SVG-анимацию с маской

Сообщение Гость »


Я пытаюсь создать приведенную ниже SVG-анимацию с маской. Я пробовал использовать свойства CSS stroke, но не смог добиться желаемого результата.


Изображение


Вот созданный мною W-образный SVG.

путь { обводка: черный; заливка: нет; ширина штриха: 2; /* Отрегулируйте ширину обводки по желанию */ инсульт-дашаррай: 1000; смещение штриха-тире: 1000; анимация: нарисовать 4 секунды линейно вперед; } #path1 { задержка анимации: 0 с; } #path2 { задержка анимации: 4 с; } #path3 { задержка анимации: 8 с; } #path4 { задержка анимации: 12 с; } @keyframes рисует { к { штрих-дашоффсет: 0; }

Ссылка на CODEPEN: https://codepen.io/eshanrajapakshe/pen/KKbYQbG

Помогите мне создать эту анимацию или предложите способ это сделать.
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»