Animated Burger Menu

Question

How can i make liquid animated menu like half of screen coverd by ellipse,random ronded polygon or amoeba which contain options by using only html & css.
Js if it's need.

Answer 1

Polygons are very trickiest to render using only html/css and amoeaba are not basic shapes really renderable with only html/css without usingl images (external or embeded as base64 data encoded -- but produce heaviest file than external image wich are binary encoded) ^^

Anyway, an intermediate solution before jumping to JS solutions, would be to use SVG (doesn't know if you consider it as "pure" html or not, or if you prefer avoidind svg more than js ;)).

For a JS solution avoiding SVG, it remain the canvas element/api, and in all cases (use of <canvas> or <svg>) you could add more or less JS to complete (however <canvas> is pointless without JS conversely to <svg>).

Finally, the way of doing is to define the element(s) wich will hold your animated drawing in your html and style it to have them as a background layer (positioned elements) while your page content are in a foreground layer (or many if you want)...

Hope this could help as first tracks to follow :)