Responsive SVG for border

Question

I downloaded an SVG code for my web application and when I resize the window the svg does not resize.

svg code:

.wave:

.wave {
 bottom: 0;
 display: block;
 height: 156px;
 overflow: hidden;
 position: absolute;
 right: 0;
 text-align: center;
 width: 100%;
 z-index: 1;
}

fullscreen view:

when I resize window:

How can I prevent the SVG from moving up?

user_7897395 · Answer

One posible way is using your shapes as a mask. Please observe that I've added a white rectangle under your shapes and I've changed the fill to black.

Thde image will be visible under the whites parts of the mask partially visible under the shades of grey and invisible undet the black parts.

Also the image is now part of the svg element and is masked by the mask. Since the svg element has no width and height will be responsive taking all the width available.

*{margin:0;padding:0;}

Responsive SVG for border

1 Answers