В
svg картинка должна быть отрисована элементом
path обязательно со свойством
stroke
<svg viewBox="0 0 340 333">
<path class="path" fill="white" stroke="black" stroke-width="4" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
На чистом
css(без
JS) фокус делается манипуляцией свойствами
stroke-dasharray,
stroke-dashoffset
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 822;
}
to {
stroke-dashoffset: 0;
}
}
Работаюший пример
https://codepen.io/chriscoyier/pen/bGyoz