Animating an array of values (clip-path)

[benjamingeorge]

I'm using Animated on the web. I am animating an array of values but I would like to be able to handle a dynamic amount of "points" in a clip-path. I can't seem to find a way to assemble a dynamic Animated.template string. Is there a way to do this that is not hardcoding references like i'm doing here in the render function?

class App extends Component {
    startPoints = [0, 0, 100, 0, 100, 100, 0, 100];
    endPoints = [0, 0, 33, 0, 33, 100, 0, 100];

    anims = this.startPoints.map(coord => new Animated.Value(coord)); 

    animate = () => {
        const ends = this.anims.map((anim, i) =>
            Animated.timing(anim, {
                toValue: this.endPoints[i],
                duration: 300
            })
        );

        Animated.parallel(ends).start();
    };

    render() {
        const styles = {
            clipPath: Animated.template`polygon(${this.anims[0]}% ${
                this.anims[1]
            }%, ${this.anims[2]}% ${this.anims[3]}%, ${this.anims[4]}% ${
                this.anims[5]
            }%, ${this.anims[6]}% ${this.anims[7]}%)`
        };

        return (
            <Animated.div
                className="container"
                style={styles}
                onClick={this.animate}
            >
                <img src="./run.jpg" />
            </Animated.div>
        );
    }
}