Footer with SVG

A SVG shape makes a footer look more organic. I made a simple wave-formed shape with Illustrator, viewed and copied the code and put it in the Squarespace code block in the footer. The CSS code below makes the SVG full-width and aligned with the bottom of the page, regardless of screen size.  

/* SVG IN FOOTER 
- - - - - - - - - - - - - - */

#block-yui_3_17_2_1_1525269432186_5014 {
  width: 100vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0 !important;

  margin-bottom: -30px;
  
  @media @768 {
  margin-bottom: -55px;
  }
  
  @media @480 {
  margin-bottom: -85px;
  }
}

.tweak-footer-layout-columns 
.Footer-inner {
  padding-bottom: 0;
}

The SVG code for actual footer on this site

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1794 274.42">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" x1="1269.83" y1="1426.04" x2="735.17" y2="499.96" gradientUnits="userSpaceOnUse">
      <stop offset="0.1" stop-color="#5f5f5f" stop-opacity="0"/>
      <stop offset="0.19" stop-color="#626262" stop-opacity="0.02"/>
      <stop offset="0.3" stop-color="#6c6c6c" stop-opacity="0.09"/>
      <stop offset="0.43" stop-color="#7d7d7d" stop-opacity="0.19"/>
      <stop offset="0.57" stop-color="#949494" stop-opacity="0.34"/>
      <stop offset="0.71" stop-color="#b1b1b1" stop-opacity="0.54"/>
      <stop offset="0.86" stop-color="#d5d5d5" stop-opacity="0.77"/>
      <stop offset="1" stop-color="#f9f9f9"/>
    </linearGradient>
  </defs>
  <title>mysvg</title>
  <path class="cls-1" d="M105.5,863.5v199h1794v-199C1473,946,866.6,804.24,612,790,326,774,105.5,863.5,105.5,863.5Z" transform="translate(-105.5 -788.08)"/>
</svg>