WebSDR: Pretty Colors for Waterfall Display

water_fall.js

(() => {
  const svgFilter = `
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0">
  <filter id="svgGradientMap">
    <feColorMatrix type="saturate" values="0" />
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.06,0.11,0.17,0.22,0.28,0.33,0.39,0.44,0.5,0.56,0.61,0.67,0.72,0.78,0.83,0.89,0.94,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.99,0.99,0.98,0.98,0.97,0.97,0.96,0.96,0.96"/>
      <feFuncG type="table" tableValues="0,0.01,0.02,0.04,0.05,0.06,0.07,0.08,0.09,0.11,0.12,0.13,0.14,0.15,0.16,0.18,0.19,0.2,0.21,0.22,0.24,0.25,0.26,0.27,0.28,0.32,0.35,0.39,0.42,0.46,0.49,0.53,0.56,0.6,0.64,0.67,0.71,0.74,0.78,0.81,0.85,0.88,0.92,0.9,0.88,0.86,0.84,0.82,0.8,0.78,0.76,0.75,0.73,0.71,0.69,0.67,0.65,0.63,0.61,0.59,0.57,0.55,0.54,0.52,0.5,0.48,0.46,0.44,0.42,0.4,0.38,0.36,0.34,0.32,0.31,0.29,0.27,0.25,0.23,0.21,0.19,0.17,0.15,0.13,0.11,0.1,0.08,0.06,0.04,0.02,0,0.14,0.27,0.41,0.55,0.69,0.82,0.96,0.96,0.96"/>
      <feFuncB type="table" tableValues="0,0.04,0.08,0.13,0.17,0.21,0.25,0.29,0.33,0.38,0.42,0.46,0.5,0.54,0.58,0.63,0.67,0.71,0.75,0.79,0.83,0.88,0.92,0.96,1,0.94,0.89,0.83,0.78,0.72,0.67,0.61,0.56,0.5,0.44,0.39,0.33,0.28,0.22,0.17,0.11,0.06,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.14,0.27,0.41,0.55,0.69,0.82,0.96,0.96,0.96"/>
    </feComponentTransfer>
  </filter>
</svg>
`;
  document.body.insertAdjacentHTML('beforeend', svgFilter);
  const el = document.querySelector('#wfcdiv0');
  if (el) {
    el.style.filter = 'sepia(0.4) invert(0.03) brightness(105%) contrast(105%) grayscale(0.1) hue-rotate(0deg) url(#svgGradientMap)';
    console.log('%c✅ Фільтр водоспаду застосовано!', 'color: limegreen; font-weight: bold;');
  } else {
    console.warn('❌ Елемент #wfcdiv0 не знайдено на сторінці.');
  }
})();