I'm wondering how to scale an SVG to look nice on every screen size. Here's what I have
- A linear gradient as background
- 2 masks that I need to apply on top of it, with white space on top of the top one and at the bottom of the bottom one
I managed to reproduce the design that I want at a size of 320x770 pixels, but I'm pulling my hair out to find how I coud make it scale well for different screen sizes or orientations.
I've created a code sandbox to showcase my problem (open it to a new window of 320x770 to see the desired result). https://codesandbox.io/s/blissful-frost-ste6y?file=/pages/index.vue
main section {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wave-wrapper {
background: linear-gradient(#0e548c, #197d89, #0e548c);
position: relative;
overflow: hidden;
}
.above-waves {
position: relative;
z-index: 2;
}
.white {
margin-top: 160px;
color: #fff;
}
.mask-1,
.mask-2 {
position: absolute;
z-index: 1;
width: 100%;
}
.mask-1__image {
width: 100%;
transform: translateY(-53%);
}
.mask-2__image {
width: 100%;
transform: translateY(-55%);
}<main>
<section>Section A</section>
<div class="wave-wrapper">
<div class="mask-1">
<img class="mask-1__image" src="https://ste6y.sse.codesandbox.io/_nuxt/assets/waves-mask-1.svg" alt="Waves mask 1">
</div>
<div class="above-waves">
<section>Section B</section>
<section>Section C</section>
</div>
<div class="mask-2">
<img class="mask-2__image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMTI5OS43NTciIHZpZXdCb3g9IjAgMCAzMjAgMTI5OS43NTciPgogIDxnIGlkPSJHcm91cGVfMTAiIGRhdGEtbmFtZT0iR3JvdXBlIDEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjQ3NSAtMTcxOSkiPgogICAgPHBhdGggaWQ9IlRyYWPDg8KpXzMxIiBkYXRhLW5hbWU9IlRyYWPDg8KpIDMxIiBkPSJNLTExNDUsMjE1NC43NTdWOTc5LjA2czMuOTkxLDI1LjU3MiwyNi4zNjksNTMuOTE5LDMzLjgxMiw0MS4zNTUsNjMuMTQyLDU5LjQ2OGMxNy4yMTIsMTAuNjI5LDMyLjk4NywxNy45MzUsNDcuNTc1LDI1LjMzMiw0OS42MiwyNS4xNjEsODYuOTQyLDMzLjc2LDg2Ljk0MiwzMy43NnM1Mi40NTQsNy40NDQsOTUuNSw3Mi4xNzV2OTMxLjA0MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNDUgODY0KSIgZmlsbD0iI2ZmZiIvPgogICAgPHBhdGggaWQ9IlRyYWPDg8KpXzMyIiBkYXRhLW5hbWU9IlRyYWPDg8KpIDMyIiBkPSJNLTExNDUsODU1cy05LjY4NCw5OC41ODcsNTguNDQ3LDE3My44MzhjMzkuNTE2LDQzLjY0NSwxMTguMTYsODcuMDE5LDE2MC40NDYsMTA1LjE3MiwzMC40LDEzLjA0OSwzNC44OTEsMTEuMjM1LDYyLjIsMzEuNzQ4LDI3LjMzMSwyMy45MTEsMzguNDMsNTguNDQ3LDM4LjQzLDU4LjQ0N3MtMjguNjEtMzkuNDgxLTY0LjEtNTguNDQ3Yy0xMy45ODMtNy40NzMtNDQuNTE5LTE2LjkxNC02OS4yNzctMjYuMzc2LTM3LjM3Ny0xNC4yODUtNzYuMjMyLTMwLjYtMTEwLjY0My01NS43ODEtNTYuNzg0LTQxLjU1NS03NS41MDYtOTkuNTMxLTc1LjUwNi05OS41MzFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTQ1IDg2NCkiIGZpbGw9IiM5M2I1YzUiLz4KICA8L2c+Cjwvc3ZnPgo=" alt="Waves mask 2">
</div>
</div>
<div>
<section>Section D</section>
</div>
</main>Here's what I've tried so far:
- Scale the SVG relative to the parent by at some point it just becomes way too big
- Keep the original size but I end up with the gradient showing on the sides
