<div>
  feComposite.operator：
  <label><input type="radio" name="operator" value="over" checked onchange="onOperatorChange(arguments[0])" />over</label>
  <label><input type="radio" name="operator" value="in" onchange="onOperatorChange(arguments[0])" />in</label>
  <label><input type="radio" name="operator" value="out" onchange="onOperatorChange(arguments[0])" />out</label>
  <label><input type="radio" name="operator" value="atop" onchange="onOperatorChange(arguments[0])" />atop</label>
  <label><input type="radio" name="operator" value="xor" onchange="onOperatorChange(arguments[0])" />xor</label>
  <label><input type="radio" name="operator" value="lighter" onchange="onOperatorChange(arguments[0])" />lighter</label>
  <label><input type="radio" name="operator" value="arithmetic" onchange="onOperatorChange(arguments[0])" />arithmetic</label>
</div>
<div id="feCompositeK" style="display: none;">
  <div>
    feComposite.k1 =
    <input id="K1" type="number" step=".1" value="0.5" oninput="onK1Change(arguments[0])" />
  </div>
  <div>
    feComposite.k2 =
    <input id="K2" type="number" step=".1" value="0.5" oninput="onK2Change(arguments[0])" />
  </div>
  <div>
    feComposite.k3 =
    <input id="K3" type="number" step=".1" value="0" oninput="onK3Change(arguments[0])" />
  </div>
  <div>
    feComposite.k4 =
    <input id="K4" type="number" step=".1" value="0" oninput="onK4Change(arguments[0])" />
  </div>
</div>
<br>

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="shape-heart" fill="red" transform="scale(5)" d="M10,6 
             Q10,0 15,0 
             T20,6 
             Q20,10 15,14 
             T10,20 
             Q10,18 5,14
             T0,6
             Q0,0 5,0
             T10,6
             Z" />
    <circle id="shape-circle" cx="50" cy="50" r="50" fill="green" />
  </defs>
  <filter id="myFilter" x="0" y="0" width="1" height="1">
    <feImage href="#shape-circle" result="circle" />
    <feComposite id="feComposite" in="SourceGraphic" in2="circle" operator="arithmetic" k1="0.5" k2="0.5" k3="0" k4="0" />
  </filter>
  <g>
    <use href="#shape-heart" />
  </g>
  <g transform="translate(100)">
    <use href="#shape-circle" />
  </g>
  <g transform="translate(200)">
    <use href="#shape-heart" filter="url(#myFilter)" />
  </g>
</svg>

function onOperatorChange(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("operator", e.target.value);

  const div = document.getElementById("feCompositeK");
  if (e.target.value === "arithmetic") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}

function onK1Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k1", e.target.value);
}

function onK2Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k2", e.target.value);
}

function onK3Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k3", e.target.value);
}

function onK4Change(e) {
  const feComposite = document.getElementById("feComposite");
  feComposite.setAttribute("k4", e.target.value);
}