I'm following this video https://www.youtube.com/watch?v=OU43e7TwlEY and everything is fine and everything is working, but I'd like to make this animation continuous without the need of playing it reverse animation.

Parts of my code look like this

useEffect(() => {
    progress.value = withRepeat(
        withTiming(1, {
            duration: 3000,
            easing: Easing.inOut(Easing.ease),
        }),
        -1,
        false
    );
}, [progress]);

const data = useDerivedValue(() => {
    const m = mix.bind(null, progress.value);
    return {
        from: {
            x: m(0, -0.05),
            y: m(0.2, 0.25),
        },
        c1: { x: m(0.3, 0.35), y: m(0, 0.05) },
        c2: { x: m(0.8, 0.85), y: m(0.5, 0.45) },
        to: { x: m(1, 1.05), y: m(0.25, 0.2) },
    };
});

const path = useAnimatedProps(() => {
    const { from, c1, c2, to } = data.value;
    return {
        d: `M ${from.x} ${from.y} C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${to.x} ${to.y} L 1 1 L 0 1 Z`,
    };
});

As you can see, the from x coordinates go from 0 to -0.05, but I can't add third coordinate 0 (so it would be 0 → -0.05 → 0, e.g. what would make it continuous). The same should be for every other point.

Any ideas? Any feedback would be appreciated. Thanks.