* {
  padding: 0;
  margin: 0;
}

html {
   background: transparent;
}

body {
  height: 100vh;
  overflow: hidden;
  
}


.meshbg {
  width: 100vw;
  height: 100vh;
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(var(--c5), white);
  

}


.mesh1 {
  width: var(--x1);
   height: var(--y1);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c5), var(--c1));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.mesh2 {
  width: var(--x2);
   height: var(--y2);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c4), var(--c5));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
}

.mesh3 {
  width: var(--x3);
   height: var(--y3);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c3), var(--c4));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
}

.mesh4 {
  width: var(--x4);
   height: var(--y4);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c2), var(--c3));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
}

.mesh5 {
  width: var(--x5);
   height: var(--y5);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c1), var(--c2));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
}
.mesh6 {
  width: var(--x6);
   height: var(--y6);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c5), var(--c1));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
}

.mesh7 {
  width: var(--x7);
   height: var(--y7);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c4), var(--c5));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
}

.mesh8 {
  width: var(--x8);
   height: var(--y8);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c3), var(--c4));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.mesh9 {
  width: var(--x9);
   height: var(--y9);
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%,var(--c2), var(--c3));
  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

}

.mesh10 {
  width: var(--x10);
   height: calc(var(--y10));
    position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
background: radial-gradient(circle at 100%, var(--c1), var(--c2));

  z-index:99;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

}