Самостоятельное рисование SVG-анимации

SVG, CSS3 02.03.2021

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

Чтобы создать самонарисовывающуюся SVG-анимацию, вам необходимо:

Установите значения stroke-dasharray и stroke-dashoffset равными длине пути;
Измените значение смещения stroke-dashoffset от длины пути до 0.


svg > * { // SVG 
  --path-length: 367;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  transition: stroke-dashoffset .5s;
}

svg:hover > * {
  stroke-dashoffset: 0;
}

Увеличивая значение stroke-dasharray, вы заменяете обводку узором из штрихов и пробелов. Чем выше значение stroke-dasharray, тем больше длина пробелов и штрихов. Вам нужно будет увеличить это значение (stroke-dasharray) до точки, где не будет виден промежуток, а у вас будет только один штрих (dash length = path length).

С другой стороны, значение stroke-dashoffset используется для смещения черточки. Если установить его равным длине пути, прочерк исчезнет.

При желании вы можете получить длину пути в JavaScript:


(function() {
  var svgObj = document.getElementsByClassName('self-draw-anim__obj');
  if(svgObj.length > 0) {
    console.log(svgObj[0].getTotalLength());
  }
}());

Класс .self-draw-anim__obj в приведенном выше примере кода применяется к пути SVG, который вы хотите анимировать:


<svg class="self-draw-anim__decoration" viewBox="0 0 156 40" preserveAspectRatio="none" aria-hidden="true"><br /> <!-- 👇 --><br /> <path <br /> class="self-draw-anim__obj"<br /> d="M77.867,1.875l-59.314,13.4C13.5,16.418,8.184,17.689,4.406,21.139c-1.421,1.3-2.631,3.081-2.37,4.956A5.586,5.586,0,0,0,3.49,28.908c2.143,2.449,5.293,3.852,8.445,4.847A73.518,73.518,0,0,0,27.41,36.55c8.793.8,17.637.89,26.469.975q20.22.2,40.44.378a179.741,179.741,0,0,0,21.225-.657c7.9-.87,15.638-2.778,23.345-4.681,3.058-.755,6.19-1.542,8.785-3.282s4.584-4.66,4.261-7.7c-.5-4.659-5.718-7.245-10.311-8.717C117.7,5.2,92.044,4.657,66.842,4.365,54.984,4.228,43.011,4.14,31.413,6.534"<br /> fill="none"<br /> stroke-miterlimit="10"<br /> stroke="currentColor" /><br /></svg>

Если вы не хотите, чтобы SVG сохранял свое соотношение сторон (установленное в окне просмотра), примените preserveAspectRatio = "none" к элементу SVG. В демонстрации ниже, например, SVG адаптируется к размеру текста.

Вот демонстрация:

Вот и всё!

Автор Себастьяно Герриеро