Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Morphing Blob Background

Problem: Morphing Blob Background

Try to animate a full-screen blob that smoothly morphs between multiple shapes using CSS clip-path and keyframes.

We'll cover the following...

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 ...