Заполнение фигуры

Подскажите пожалуйста как реализовать на Javascript/html/CSS процентное заполнение (заливку) svg фигуры. Причём, чтоб заливка вела себя как жидкость, т.е. чтоб поверхность была параллельна нижней/верхней границам окна даже при изменении угла наклона фигуры.

Например Есть квадрат. Он заполнен на 50%. Угол наклона 15°.

Всем кто откликнется, заранее огромное спасибо!