How to expand a SVG responsively?

Question

I'm using a SVG under an hamburger menu so when the user clicks that menu, the SVG expands and fills the entire screen with the options on it. I'm using scale() for that so basically what happens is that the SVG has a scale of 1 and when the user clicks on the menu the SVG gets a scale(35).

Now the problem. That scale(35) doesn't fill the entire screen on bigger resolutions or even on some mobile resolutions with bigger height. If I set the scale for something that will ensure me that will cover most of the screens, like scale(70), this will make the close animation really messy for going through such a big scale to 1. How can I expand this SVG with a smooth animation so it fills every type of screen?

EDIT - Added code with a simple and fast example downthere

Below are some images that explain what happens.

Closed menu / SVG with scale(1)

Opened menu / SVG with scale(70)

Menu closing / SVG going from scale(70) to scale(1) and looking messy

function menuOnClick() {
  document.getElementById("menu-bar").classList.toggle("change");
  document.getElementById("nav").classList.toggle("change");
  document.getElementById('blob').classList.toggle("change-bg");
}

#menu {
  z-index: 2;
}

#menu-bar {
  width: 45px;
  height: 40px;
  margin: 30px 0 20px 20px;
  cursor: pointer;
  float: right;
}

.bar {
  height: 5px;
  width: 100%;
  background-color: #00d1a9;;
  display: block;
  border-radius: 5px;
  transition: 0.3s ease;
}

#bar1 {
  transform: translateY(-4px);
}

#bar3 {
  transform: translateY(4px);
}

.nav {
  transition: 0.3s ease;
  display: none;
}

.nav ul {
  padding: 0 22px;
}

.nav li {
  list-style: none;
  padding: 12px 0;
}

.nav li a {
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.nav li a:hover {
  font-weight: bold;
}

.menu-bg, #menu {
  top: 0;
  left: 0;
  position: absolute;
}

.change {
  display: block;
}

.change .bar {
  background-color: white;
}

.change #bar1 {
  transform: translateY(4px) rotateZ(-45deg);
}

.change #bar2 {
  opacity: 0;
}

.change #bar3 {
  transform: translateY(-6px) rotateZ(45deg);
}

.change-bg {
  transform: scale(70);
}
.blob {
  margin-top:-32px;
  top: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-transition: all 0.75s linear;
  transition: all 0.75s linear;
  display: block;
  will-change: auto;
    filter: none;
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -ms-filter: blur(0);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}


  
    
    
    
  
  
    
      Home
      About
      Contact
      Blog

A Haworth · Accepted Answer

The question is how to scale the blob responsively rather than have just one scale value which could be too small for very large screens, and conversely cause problems on very small ones when shrinking.

As JS is already being invoked on click we can get the base-size of the blob and see 'how many times' it will fit into the window height and width respectively and use those ratios to calculate a scale that will guarantee the window becomes covered but without huge scaling.

We can do this by calculating a CSS variable in the click event function which will then get used in the change-bg class (but will be ignored when this class is not set). This has the advantage that it will automatically recalculate scale if the window has been resized.

function menuOnClick() {
  document.getElementById("menu-bar").classList.toggle("change");
  document.getElementById("nav").classList.toggle("change");
  document.getElementById('blob').classList.toggle("change-bg");
  /* added */
  let blob = document.getElementById('blob');
  let rect = blob.getBoundingClientRect();
  document.getElementById('blob').style.setProperty('--scale', Math.max(4*window.innerWidth/rect.width,4*window.innerHeight/rect.height));
}

#menu {
  z-index: 2;
}

#menu-bar {
  width: 45px;
  height: 40px;
  margin: 30px 0 20px 20px;
  cursor: pointer;
  float: right;
}

.bar {
  height: 5px;
  width: 100%;
  background-color: #00d1a9;;
  display: block;
  border-radius: 5px;
  transition: 0.3s ease;
}

#bar1 {
  transform: translateY(-4px);
}

#bar3 {
  transform: translateY(4px);
}

.nav {
  transition: 0.3s ease;
  display: none;
}

.nav ul {
  padding: 0 22px;
}

.nav li {
  list-style: none;
  padding: 12px 0;
}

.nav li a {
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.nav li a:hover {
  font-weight: bold;
}

.menu-bg, #menu {
  top: 0;
  left: 0;
  position: absolute;
}

.change {
  display: block;
}

.change .bar {
  background-color: white;
}

.change #bar1 {
  transform: translateY(4px) rotateZ(-45deg);
}

.change #bar2 {
  opacity: 0;
}

.change #bar3 {
  transform: translateY(-6px) rotateZ(45deg);
}

.blob {
  transform: scale(1); /* added */
  margin-top:-32px;
  top: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-transition: all 0.75s linear;
  transition: all 0.75s linear;
  display: block;
  will-change: auto;
    filter: none;
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -ms-filter: blur(0);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
.change-bg { /* moved after .blob so takes precedence */
  transform: scale(var(--scale));/* Changed from 70 */
}


  
    
    
    
  
  
    
      Home
      About
      Contact
      Blog

Note: this snippet seems to work on different window sizes OK, but in the 'emulator' for mobile on Edge in Windows10 I noticed a single little jerk when shrinking. I cannot explain this. Hope someone can.

How to expand a SVG responsively?

Answers (2)

Related Questions