Как анимировать появление логотипа (свг)?

Question

[olya_097]

как тут https://profinvest.com/

https://codepen.io/Olya097/pen/NWrYvRN?editors=1100

Answer 1

[Ivan Bogachev]

Общая концепция будет примерно такая:

@keyframes custom-fade-in {
    0% {
        stroke-dasharray: 0 300;
        fill: transparent;
        animation-timing-function: ease-in;
    }
    50% {
        stroke-dasharray: 150 150;
        fill: transparent;
        animation-timing-function: ease-out;
    }
    100% {
        stroke-dasharray: 300 0;
        fill: #000;
    }
}

path {
    stroke: #000;
    fill: none;
    stroke-dasharray: 0 300;
    animation: custom-fade-in 2s ease-in-out infinite;
    animation-fill-mode: forwards;
}

Но если взять контуры как есть, то они будут заливаться не там, где нужно по дизайну. Нужно открыть эту SVG в векторном графическом редакторе и слегка порезать эти контуры. Нужно чтобы каждая буква была обрисована линией по кругу один раз, а не два, как сейчас. Тогда заливка будет по всей букве. А то сейчас заливается пространство между двумя почти продублированными контурами букв, т.к. технически именно оно является внутренной частью path. А еще будет удобно каждую букву делать отдельным контуром - проще будет подобрать значения для stroke-dasharray.

Comments

[olya_097]

Ivan Bogachev, спасибо
а как можно порезать контуры? пробую через фигму - вроде там нет такого

[Ivan Bogachev]

olya_097, не знаю, умеет ли фигма работать с векторной графикой, так что с ней не подскажу. Сам я обычно использую Inkscape для подобных задач.

[olya_097]

Ivan Bogachev, извиняюсь
а тут рамку можно также анимировать?