✅ Как создать плавную анимацию фигуры?
Делимся готовым HTML и CSS кодом ниже для создания интересно стилизованной анимации фигуры. Она бесконечно повторяется по одинаковой траекторией и создает фигуру напоминающею лужу:
HTML ⤵️
Делимся готовым HTML и CSS кодом ниже для создания интересно стилизованной анимации фигуры. Она бесконечно повторяется по одинаковой траекторией и создает фигуру напоминающею лужу:
HTML ⤵️
<svg viewbox="0 0 999 999">
<path class="path" fill="#333" stroke="white" stroke-width="2" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,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-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
body {
background: #333;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: path 5s linear alternate infinite;
}
@keyframes path {
from {
stroke-dashoffset: 999;
}
to {
stroke-dashoffset: 0;
}
}