Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Morphing Blob Background

Solution: Morphing Blob Background

Let’s 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. ...