Animation Generator

Create custom clip-path animations with interactive controls. Adjust the parameters below to modify the animation behavior and visual appearance.

Animation Controls

Path Definitions

Start Path: End Path: Swim Map (use "swim" for animated points):

Animation Parameters

Duration (ms):

2000

Delay (ms):

350

Swimming Strength:

Parent Container

Parent Width (px):

400

Parent Height (px):

800

Parent Scale (%):

100

Parent Clip-Path:

Animation Preview

                // Current animation settings:
                const animator = new ClipPathAnimator(
                '#animation-element',
                'M 0 175 C 100 50 100 150 200 100 L 200 200 L 0 200 Z',
                'M 0 50 C 100 -50 100 50 200 0 L 200 200 L 0 200 Z',
                'M 0 50 C swim -50 swim 50 200 0 L 200 200 L 0 200 Z',
                100,
                75,
                1,
                2000,
                350
                );
            