Scale an SVG responsively in CSS

Question

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%);
}


    Section A
    
      
        
      
      
        Section B
        Section C
      
      
        
      
    
    
      Section D

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

Temani Afif · Accepted Answer

I would first simplify your code to consider multiple background then I edited your SVG a little and added preserveAspectRatio="none" to allow them to scale:

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wave-wrapper {
  background: 
   url('data:image/svg+xml;utf8,') 
   top / 101% 40%,
   url('data:image/svg+xml;utf8,')
   bottom / 101% 40%,
   linear-gradient(#0e548c, #197d89, #0e548c);
 background-repeat:no-repeat;
}


  Section A
  
    Section B
    Section C
  
  Section D

You can easily switch the position:

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wave-wrapper {
  background: 
   url('data:image/svg+xml;utf8,') 
   bottom / 101% 50%,
   url('data:image/svg+xml;utf8,')
   top / 101% 50%,
   linear-gradient(#0e548c, #197d89, #0e548c);
 background-repeat:no-repeat;
}


  Section A
  
    Section B
    Section C
  
  Section D

Like below for each section:

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section:nth-child(2) {
  background:
   url('data:image/svg+xml;utf8,')
   top right/101% 80% no-repeat, 
   linear-gradient(#0e548c, #197d89);
}

section:nth-child(3) {
  background: 
   url('data:image/svg+xml;utf8,')
   bottom right/101% 80% no-repeat, 
   linear-gradient(#197d89, #0e548c);
}


  Section A
  Section B
  Section C
  Section D

As a bonus you can also consider mask to have transparency instead of white color:

:root {
  --svg1:url('data:image/svg+xml;utf8,');
  --svg1-mask:url('data:image/svg+xml;utf8,');
  --svg2:url('data:image/svg+xml;utf8,');
  --svg2-mask:url('data:image/svg+xml;utf8,');
}

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position:relative;
  z-index:0;
}

section:nth-child(2):before,
section:nth-child(3):before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  
  --s:101% 80%; /* control the height(80%) to adjust the SVG */
  /* Mask */
  -webkit-mask:
     var(--m),
     linear-gradient(#fff,#fff);
          mask:
     var(--m),
     linear-gradient(#fff,#fff);
  -webkit-mask-size: var(--s),100% 100%;
          mask-size: var(--s),100% 100%;
  -webkit-mask-position:var(--p);
          mask-position:var(--p);
  -webkit-mask-composite:destination-out;
          mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  /* background */
  background:
     var(--b) var(--p)/var(--s), 
     linear-gradient(var(--d),#0e548c, #197d89);
  background-repeat: no-repeat;
}

section:nth-child(2) {
  --m:var(--svg1-mask);
  --p:top right;
  --b:var(--svg1);
  --d:180deg;
}

section:nth-child(3) {
  --m:var(--svg2-mask);
  --p:bottom right;
  --b:var(--svg2);
  --d:0deg;
}

body {
  background:grey;
  margin:0;
}


  Section A
  Section B
  Section C
  Section D

Scale an SVG responsively in CSS

Answers (1)

Related Questions