<select id="select">
   <option value="default">Default</option>
   <option value="pink">Pink</option>
   <option value="green">Green</option>
   <option value="blue">Blue</option>
</select>

<svg style="width:0;height:0;position:absolute;left:-9999px;" aria-hidden="true" focusable="false">
   <linearGradient id="pink" x2="1" y2="1">
      <stop offset="0%" stop-color="#ff2882"></stop>
      <stop offset="100%" stop-color="#963cff"></stop>
   </linearGradient>
   <linearGradient id="green" x2="1" y2="1">
      <stop offset="0%" stop-color="#37003c"></stop>
      <stop offset="100%" stop-color="#00ff87"></stop>
   </linearGradient>
   <linearGradient id="blue" x2="1" y2="1">
      <stop offset="0%" stop-color="#05f0ff"></stop>
      <stop offset="100%" stop-color="#963cff"></stop>
   </linearGradient>
</svg>

<svg class="shape" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1432 524" style="right: -10px;" xml:space="preserve">
   <linearGradient id="default" gradientUnits="userSpaceOnUse" x1="1348.4205" y1="329.9624" x2="495.7404" y2="481.3125" gradientTransform="matrix(1 0 0 -1 0 524)">
      <stop offset="0" style="stop-color:#FF2882"></stop>
      <stop offset="1" style="stop-color:#640a4c"></stop>
   </linearGradient>
   <path id="path" d="M1432,0v139.9c-216.6,90.1-456.5,139.8-705.3,139.8c-35.3,0-42.6,1.1-77.4-0.9l107.6-108.2 c-195.9,0-406.8-27.2-583.9-84.3l75.3-75.7C235.3,7.3,222.3,3.7,209.4,0h665.7l-58.8,59.1c97.9-10.3,199.5-30.7,298.2-59.1H1432z"></path>
</svg>
body {
   background-color: #2a2a2a;
}

select {
   position: fixed;
   bottom: 2rem;
   left: 2rem;
   z-index: 100;
}

.shape {
   position: absolute;
   top: 0;
   height: 100%;
}

path {
   fill: url(#default);
   
   &.pink {
      fill: url(#pink);
   }

   &.green {
      fill: url(#green);
   }

   &.blue {
      fill: url(#blue);
   }
}
const select = document.getElementById("select");
let path = document.getElementById("path");
let theme = "";

select.addEventListener( 'change', function() {
   theme = select.value;
   path.removeAttribute("class");
   path.classList.add(theme);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.