<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap" rel="stylesheet">
<svg width=0 height=0>
  <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

    <feImage id="identity-map" x="0" y="0" width="1200px" height="400px" href="#myMap" />
    <feDisplacementMap in="SourceGraphic" scale="-2000" xChannelSelector="R" yChannelSelector="B" />

    <feOffset dx="0" dy="-160" />
    <feComposite in2="SourceGraphic" />

  </filter>
</svg>
<div class="text">Displacement scale POC</div>

<svg id="myMap" width="128" height="128" preserveAspectRatio="xMidYMid meet" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      .redGradient {
        fill: url(#redGradient);
      }

      .blueGradient {
        fill: url(#blueGradient);
        mix-blend-mode: screen;
      }

      .redSymbol {
        display: block;
      }
    </style>

    <linearGradient id="redGradient" x1="0" x2="1" y1="0" y2="0" color-interpolation="sRGB" gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#FF0000" stop-opacity="0" />
    </linearGradient>

    <linearGradient id="blueGradient" x1="0" x2="0" y1="0" y2="1" color-interpolation="sRGB" gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#0000FF" />
      <stop offset="100%" stop-color="#0000FF" stop-opacity="0" />
    </linearGradient>

    <rect class="redGradient" id="redGradientRect" width="128" height="128" x="0" y="0" />
  </defs>

  <rect fill="black" height="128" width="128" x="0" y="0" />
  <use class="redSymbol" href="#redGradientRect" />
  <rect class="blueGradient" height="128" width="128" x="0" y="0" />
</svg>

<!-- identity-map as png
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAAACXBIWXMAAAsTAAALEwEAmpwYAAACK0lEQVR42u3YQQqEQAxFwdh4/yN3XDQNgu5FfhVZjLMMPgIeXd1Va2r/WDPf/jTmX1O3l/n5qp/7ERIJAAFAqmEFuAAgABAACACCApi2gAsAiXwGxQUAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAEIAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAASAAGwBAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAQAAgABAACAAEAAIAAYAAEIAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAAQAAgABgABAACAAEAAIAASAAASAAEAAIAAQAAgABAACAAGAAEAAIAAQAAgABAACAAGAAEAAIAAQAAgABAACAAGAAEAAIAD4wLACXADIDWDaAi4ACAAEAAKACD6D4gKAACDQBUH0+gnFLYOsAAAAAElFTkSuQmCC"/>
-->

.text {
  width: 1200px;
  height: 400px;
  font: 120px Arial, sans-serif;
  filter: url(#filter);
  white-space: nowrap;
}
body {
  background-color: #777;
}

const uRIComponent = document.getElementById("myMap").outerHTML;
const encodedURI = encodeURIComponent(uRIComponent);
const myFeImage = document.querySelector("#identity-map");

myFeImage.setAttribute(
  `href`,
  `data:image/svg+xml;charset=utf-8,${encodedURI}`
);

document.documentElement.scrollTo({
  left: 395,
  behavior: "smooth"
});