body,

html {

    width: 100%;

    height: 100%;

    background: conic-gradient(

        #fff,

        #fff 90deg,

        #ddd 180deg,

        #fff 180deg,

        #fff 270deg,

        #ddd 270deg

    );

    background-size: 50px 50px;

    overflow-x: hidden;

}

​

.g-svg {

    position: absolute;

    top: 0;

    left: 50%;

    width: 700px;

    height: 2000px;

    transform: translate(-50%, 0);

}

​

.g-container {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translate(-50%, 0);

    width: 700px;

    height: 2000px;

​

    &::before {

        // content: "";

        position: absolute;

        inset: 0 -600px;

        background: url(https://s1.ax1x.com/2023/09/06/pPsfktg.jpg);

        background-size: cover;

        // background:

        //     linear-gradient(#87ddf0, #fff);

    }

}

​

.ele {

    position: absolute;

    width: 40px;

    height: 40px;

    clip-path: polygon(0 0, 100% 50%, 0 100%);

    offset-path: path("M 350 40 C 1000 1000, -350 1000, 350 1960");

    background: linear-gradient(270deg, #65d060, #0887ec);

    animation: move 4s linear;

    animation-timeline: scroll(root);

}

​

#svgpath {

    stroke-dasharray: 2108, 2108;

    animation: lineMove 4s linear;

    animation-timeline: scroll(root);

    stroke-width: 3px;

    stroke: #9bc9de;

}

​

p {

    position: absolute;

    left: 0;

    width: 100vw;

    text-align: center;

    color: #fff;

    font-size: 56px;

    text-shadow: 0 0 6px #0d506e;

    opacity: 0;

}

​

.p1 {

    --scale: .1;

    --x: -700px;

    top: 500px;

    animation: show 1s linear forwards;

    animation-timeline: scroll(root);

    animation-range: 100px 300px;

}

.p2 {

    --scale: .2;

    --x: 900px;

    top: 900px;

    animation: show 1s linear forwards;

    animation-timeline: scroll(root);

    animation-range: 350px 600px;

}

​

@keyframes lineMove {

    0% {

        stroke-dashoffset: 2108;

    }

    100% {

        stroke-dashoffset: 0;

    }

}

​

@keyframes move {

    0% {

        offset-distance: 0%;

    }

    50% {

        transform: scale(2.5);

    }

    100% {

        offset-distance: 100%;

    }

}

​

@keyframes show {

    0% {

        transform: scale(var(--scale)) translate(var(--x), 0);

        opacity: 0;

    }

    100% {

        transform: scale(1) translate(0, 0);

        opacity: 1;

    }

}

var obj = document.querySelector("#svgpath");

var length = obj.getTotalLength();

console.log(length); // 377.0433