Problem description

Given an HTML page containing a <div class="blob"></div> element, write CSS to:

• Define at least four CSS custom properties (--clip1, --clip2, --clip3, and --clip4), each holding a polygon() value describing a distinct blob shape.

• Set .blob to fill the viewport (width: 100vw; height: 100vh) and apply a background gradient.

• Use clip-path: var(--clip1) initially on .blob.

• Define a @keyframes blobMorph animation that transitions clip-path from var(--clip1) ➔ var(--clip2) ➔ var(--clip3) ➔ var(--clip4) ➔ var(--clip1).

• Apply the blobMorph animation to .blob with an 8s duration, ease-in-out timing, and infinite iteration.

Goal

Write CSS rules to produce a continuously morphing blob background by animating clip-path through multiple polygon shapes using CSS-only techniques.

Constraints

• Use only CSS (no JavaScript).

• Blob element dimensions should be width: 100vw; height: 100vh;.

• For background, use a linear gradient (e.g., linear-gradient(135deg, #ff9a9e, #fad0c4)).

• There should be at least four distinct clip-path polygon definitions stored in CSS variables.

• Animation name should be blobMorph.

• Animation duration should be 8s.

• Animation timing function should be ease-in-out.

• Animation iteration count should be infinite.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.