Как анимировать рисование подобной фигуры?
1,00
р.
Своял такой текст в illustrator вот такую штуку
Так как сниппет ruSO не пропускает количество символов я выложил SVG в codepen
_https://codepen.io/topicstarter/pen/YBVWKx
Как сделать анимацию рисования ?
Ответ
Анимацию на основе изменения атрибута stroke-dashoffset сделать невозможно, так как контуры фигуры имеют двойные линии. На рисунке ниже они указаны стрелками. Для анимации контура существуют два основных требования: контур должен быть одиночным и не иметь разрывов.
Ниже смотрите похожий пример анимации, но он реализован на другом принципе: изменении радиуса r и положения центра окружности cx
body, html {
padding: 0
margin: 0
background: teal
}
svg {
display: block
}
circle {
animation: circles 2s alternate infinite cubic-bezier(0.5, 0, 0.5, 1)
cy: 15
}
circle:nth-child(4n+1) {
fill: darkorange
}
circle:nth-child(4n+2) {
fill: gold
}
circle:nth-child(4n+3) {
fill: teal
}
circle:nth-child(4n+4) {
fill: tomato
}
circle:nth-child(0) {
animation-delay: 0s
cx: 61
r: 8.5
}
circle:nth-child(1) {
animation-delay: -0.15s
cx: 59
r: 9
}
circle:nth-child(2) {
animation-delay: -0.3s
cx: 57
r: 9.5
}
circle:nth-child(3) {
animation-delay: -0.45s
cx: 55
r: 10
}
circle:nth-child(4) {
animation-delay: -0.6s
cx: 53
r: 10.5
}
circle:nth-child(5) {
animation-delay: -0.75s
cx: 51
r: 11
}
circle:nth-child(6) {
animation-delay: -0.9s
cx: 49
r: 11.5
}
circle:nth-child(7) {
animation-delay: -1.05s
cx: 47
r: 12
}
circle:nth-child(8) {
animation-delay: -1.2s
cx: 45
r: 12.5
}
circle:nth-child(9) {
animation-delay: -1.35s
cx: 43
r: 13
}
circle:nth-child(10) {
animation-delay: -1.5s
cx: 41
r: 13.5
}
circle:nth-child(11) {
animation-delay: -1.65s
cx: 39
r: 14
}
circle:nth-child(12) {
animation-delay: -1.8s
cx: 37
r: 14.5
}
circle:nth-child(13) {
animation-delay: -1.95s
cx: 35
r: 15
}
circle:nth-child(14) {
animation-delay: -2.1s
cx: 33
r: 15.5
}
circle:nth-child(15) {
animation-delay: -2.25s
cx: 31
r: 16
}
circle:nth-child(16) {
animation-delay: -2.4s
cx: 29
r: 16.5
}
circle:nth-child(17) {
animation-delay: -2.55s
cx: 27
r: 17
}
circle:nth-child(18) {
animation-delay: -2.7s
cx: 25
r: 17.5
}
circle:nth-child(19) {
animation-delay: -2.85s
cx: 23
r: 18
}
circle:nth-child(20) {
animation-delay: -3s
cx: 21
r: 18.5
}
circle:nth-child(21) {
animation-delay: -3.15s
cx: 19
r: 19
}
circle:nth-child(22) {
animation-delay: -3.3s
cx: 17
r: 19.5
}
circle:nth-child(23) {
animation-delay: -3.45s
cx: 15
r: 20
}
circle:nth-child(24) {
animation-delay: -3.6s
cx: 13
r: 20.5
}
circle:nth-child(25) {
animation-delay: -3.75s
cx: 11
r: 21
}
circle:nth-child(26) {
animation-delay: -3.9s
cx: 9
r: 21.5
}
circle:nth-child(27) {
animation-delay: -4.05s
cx: 7
r: 22
}
circle:nth-child(28) {
animation-delay: -4.2s
cx: 5
r: 22.5
}
circle:nth-child(29) {
animation-delay: -4.35s
cx: 3
r: 23
}
circle:nth-child(30) {
animation-delay: -4.5s
cx: 1
r: 23.5
}
circle:nth-child(31) {
animation-delay: -4.65s
cx: -1
r: 24
}
circle:nth-child(32) {
animation-delay: -4.8s
cx: -3
r: 24.5
}
circle:nth-child(33) {
animation-delay: -4.95s
cx: -5
r: 25
}
circle:nth-child(34) {
animation-delay: -5.1s
cx: -7
r: 25.5
}
circle:nth-child(35) {
animation-delay: -5.25s
cx: -9
r: 26
}
circle:nth-child(36) {
animation-delay: -5.4s
cx: -11
r: 26.5
}
circle:nth-child(37) {
animation-delay: -5.55s
cx: -13
r: 27
}
circle:nth-child(38) {
animation-delay: -5.7s
cx: -15
r: 27.5
}
circle:nth-child(39) {
animation-delay: -5.85s
cx: -17
r: 28
}
circle:nth-child(40) {
animation-delay: -6s
cx: -19
r: 28.5
}
circle:nth-child(41) {
animation-delay: -6.15s
cx: -21
r: 29
}
circle:nth-child(42) {
animation-delay: -6.3s
cx: -23
r: 29.5
}
circle:nth-child(43) {
animation-delay: -6.45s
cx: -25
r: 30
}
circle:nth-child(44) {
animation-delay: -6.6s
cx: -27
r: 30.5
}
circle:nth-child(45) {
animation-delay: -6.75s
cx: -29
r: 31
}
@keyframes circles {
to {
transform: translate(5%, 50%)
}
}
Источник @web-tiki
Так как сниппет ruSO не пропускает количество символов я выложил SVG в codepen
_https://codepen.io/topicstarter/pen/YBVWKx
Как сделать анимацию рисования ?
Ответ
Анимацию на основе изменения атрибута stroke-dashoffset сделать невозможно, так как контуры фигуры имеют двойные линии. На рисунке ниже они указаны стрелками. Для анимации контура существуют два основных требования: контур должен быть одиночным и не иметь разрывов.
Ниже смотрите похожий пример анимации, но он реализован на другом принципе: изменении радиуса r и положения центра окружности cx
body, html {
padding: 0
margin: 0
background: teal
}
svg {
display: block
}
circle {
animation: circles 2s alternate infinite cubic-bezier(0.5, 0, 0.5, 1)
cy: 15
}
circle:nth-child(4n+1) {
fill: darkorange
}
circle:nth-child(4n+2) {
fill: gold
}
circle:nth-child(4n+3) {
fill: teal
}
circle:nth-child(4n+4) {
fill: tomato
}
circle:nth-child(0) {
animation-delay: 0s
cx: 61
r: 8.5
}
circle:nth-child(1) {
animation-delay: -0.15s
cx: 59
r: 9
}
circle:nth-child(2) {
animation-delay: -0.3s
cx: 57
r: 9.5
}
circle:nth-child(3) {
animation-delay: -0.45s
cx: 55
r: 10
}
circle:nth-child(4) {
animation-delay: -0.6s
cx: 53
r: 10.5
}
circle:nth-child(5) {
animation-delay: -0.75s
cx: 51
r: 11
}
circle:nth-child(6) {
animation-delay: -0.9s
cx: 49
r: 11.5
}
circle:nth-child(7) {
animation-delay: -1.05s
cx: 47
r: 12
}
circle:nth-child(8) {
animation-delay: -1.2s
cx: 45
r: 12.5
}
circle:nth-child(9) {
animation-delay: -1.35s
cx: 43
r: 13
}
circle:nth-child(10) {
animation-delay: -1.5s
cx: 41
r: 13.5
}
circle:nth-child(11) {
animation-delay: -1.65s
cx: 39
r: 14
}
circle:nth-child(12) {
animation-delay: -1.8s
cx: 37
r: 14.5
}
circle:nth-child(13) {
animation-delay: -1.95s
cx: 35
r: 15
}
circle:nth-child(14) {
animation-delay: -2.1s
cx: 33
r: 15.5
}
circle:nth-child(15) {
animation-delay: -2.25s
cx: 31
r: 16
}
circle:nth-child(16) {
animation-delay: -2.4s
cx: 29
r: 16.5
}
circle:nth-child(17) {
animation-delay: -2.55s
cx: 27
r: 17
}
circle:nth-child(18) {
animation-delay: -2.7s
cx: 25
r: 17.5
}
circle:nth-child(19) {
animation-delay: -2.85s
cx: 23
r: 18
}
circle:nth-child(20) {
animation-delay: -3s
cx: 21
r: 18.5
}
circle:nth-child(21) {
animation-delay: -3.15s
cx: 19
r: 19
}
circle:nth-child(22) {
animation-delay: -3.3s
cx: 17
r: 19.5
}
circle:nth-child(23) {
animation-delay: -3.45s
cx: 15
r: 20
}
circle:nth-child(24) {
animation-delay: -3.6s
cx: 13
r: 20.5
}
circle:nth-child(25) {
animation-delay: -3.75s
cx: 11
r: 21
}
circle:nth-child(26) {
animation-delay: -3.9s
cx: 9
r: 21.5
}
circle:nth-child(27) {
animation-delay: -4.05s
cx: 7
r: 22
}
circle:nth-child(28) {
animation-delay: -4.2s
cx: 5
r: 22.5
}
circle:nth-child(29) {
animation-delay: -4.35s
cx: 3
r: 23
}
circle:nth-child(30) {
animation-delay: -4.5s
cx: 1
r: 23.5
}
circle:nth-child(31) {
animation-delay: -4.65s
cx: -1
r: 24
}
circle:nth-child(32) {
animation-delay: -4.8s
cx: -3
r: 24.5
}
circle:nth-child(33) {
animation-delay: -4.95s
cx: -5
r: 25
}
circle:nth-child(34) {
animation-delay: -5.1s
cx: -7
r: 25.5
}
circle:nth-child(35) {
animation-delay: -5.25s
cx: -9
r: 26
}
circle:nth-child(36) {
animation-delay: -5.4s
cx: -11
r: 26.5
}
circle:nth-child(37) {
animation-delay: -5.55s
cx: -13
r: 27
}
circle:nth-child(38) {
animation-delay: -5.7s
cx: -15
r: 27.5
}
circle:nth-child(39) {
animation-delay: -5.85s
cx: -17
r: 28
}
circle:nth-child(40) {
animation-delay: -6s
cx: -19
r: 28.5
}
circle:nth-child(41) {
animation-delay: -6.15s
cx: -21
r: 29
}
circle:nth-child(42) {
animation-delay: -6.3s
cx: -23
r: 29.5
}
circle:nth-child(43) {
animation-delay: -6.45s
cx: -25
r: 30
}
circle:nth-child(44) {
animation-delay: -6.6s
cx: -27
r: 30.5
}
circle:nth-child(45) {
animation-delay: -6.75s
cx: -29
r: 31
}
@keyframes circles {
to {
transform: translate(5%, 50%)
}
}
Источник @web-tiki
