<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="285" preserveAspectRatio="none">
    <defs>
      <path fill="var(--fillColor)" fill-rule="evenodd" d="M92.359375 15.1601563c-.7928734-5.40979261 5.2874894-10.60477178 17.010742-10.69726567 12.792163-.10092736 32.573477 2.12944526 51.792969 2.95800781 36.833008 1.58789062 45.224609 1.37011719 72.139648 1.37011719 11.174186 0 28.769931-1.35326917 44.788086-1.37011719 29.706572-.0312456 59.723896 0 74.066407 0 20.844578 0 41.60022.45467969 62.458984 0 17.031198-.37124634 32.221907-1.08459012 45.297852-1.63964844 18.330138-.77809264 27.480468-2.66210937 34.113281 0 6.632812 2.66210938 7.605469 7.9169922 9.026367 7.9169922 1.420898 0 1.850586-13.48046876 12.692383-13.48046876 8.809076 0 15.962482 3.24862781 44.550781 4.24511719 6.596836.22994291 14.230987 1.31835937 23.294922 1.31835937 36.705091 0 70.764374-1.92320126 107.060547-2.66210937 11.508996-.23429718 26.956094 0 38.77832 0h65.150391c15.832031 0 42.102374-.87962402 69.569336-1.5546875 23.096732-.5676551 41.486958-.35491205 43.439453 0 15.945312 2.8984375-2.150391 49.37988277 0 51.66992187 2.15039 2.2900391 7.342773-.9648437 15.958008 2.2900391 8.615234 3.2548828 23.866081 6.1331501 37.114257 9.8066406C979.44094 70.5381 999 76.2663676 999 79.2919922c0 2.9087173.54016 33.5355498-4.316406 69.0302738-2.803074 20.486557-9.186748 43.469838-13.132813 64.135742-7.424116 38.88078-15.7192 72.490501-20.888672 72.490501-12.677734 0-912.2363277.142311-923.8642574-7.050071C25.1699219 270.706055.50269333 85.9480599.2763156 75.953125c-.21846206-9.9949349 18.1787625-11.3466797 36.521536-14.5703125 9.1742538-1.6123203 19.5368779-4.1720468 29.3623046-5.8583984 12.4511-2.1369996 14.0263672-3.7705079 26.1992188-5.3828125 12.172852-1.6123047 5.4296875 2.0654297 0-34.9814453z" id="a"/>
    </defs>
    <use xlink:href="#a"/>
  </svg>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/couch-8_xrckc2.png" />
  <input type="color" value="#ff3366">
</div>

body,
html {
  min-height: 100vh;
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  font-family: arial;
  font-size: 12px;
}

body {
  background: linear-gradient(to right, #24243e, #302b63, #24243e);
}

:root {
  --fillColor: #f36;
}

.container {
  position: relative;
  transform: scale(.66);
  
  svg {
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
  }
}

input[type="color"] {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(100% + 20px);
    z-index: 4;
    -webkit-appearance: none;
    width: 200px;
    height: 80px;
    border: none;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

const inputEle = document.querySelector('input')

document.documentElement.style.setProperty('--fillColor', inputEle.value);

inputEle.addEventListener('change', (e)=>{
  document.documentElement.style.setProperty('--fillColor', e.target.value);
})