How to animate logo appearance (svg)?

Question

css

like here https://profinvest.com/

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

Answer 1

The general concept would be something like this:

@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;
}

But if you take the contours as they are, then they will not be filled in where they need to by design. We need to open this SVG in a vector graphics editor and cut these paths a little. It is necessary that each letter be outlined with a line in a circle once, and not twice, as it is now. Then the fill will be all over the letter. And now the space between the two almost duplicated contours of the letters is being filled, because technically it is the inner part of path. It will also be convenient to make each letter a separate contour - it will be easier to choose the values ​​for stroke-dasharray.