<svg version="1.2" width="500" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="oBBoBBWhiteScale" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
      <feFlood flood-color="rgb(50%,50%,50%)" flood-opacity="1.0" x="0" y="0" height="1" width="1" result="grey-input"/>
      <feFlood flood-color="rgb(100%,100%,0%)" flood-opacity="1.0" x="0" y="0" width="1" height="1" result="displacement-map"/>
      <feDisplacementMap x="0" y="0" width="1" height="1" scale ="0.5" in="grey-input" in2="displacement-map" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
    <filter id="oBBoBBLight" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
      <feFlood flood-color="rgb(50%,50%,50%)" flood-opacity="1.0" x="0" y="0" height="1" width="1" result="grey-input"/>
      <feFlood flood-color="rgb(0%,0%,19%)" flood-opacity="0.75" x="0" y="0" width="1" height="1" result="displacement-map"/>
      <feDisplacementMap x="0" y="0" width="1" height="1" scale ="1.0" in="grey-input" in2="displacement-map" xChannelSelector="B" yChannelSelector="A"/>
    </filter>
    <filter id="oBBoBBDark" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
      <feFlood flood-color="rgb(50%,50%,50%)" flood-opacity="1.0" x="0" y="0" height="1" width="1" result="grey-input"/>
      <feFlood flood-color="rgb(25%,100%,25%)" flood-opacity="1.0" x="0" y="0" width="1" height="1" result="displacement-map"/>
      <feDisplacementMap x="0" y="0" width="1" height="1" scale ="1.0" in="grey-input" in2="displacement-map" xChannelSelector="R" yChannelSelector="B"/>
    </filter>

    <filter id="USOUOBBBlackScale" filterUnits="userSpaceOnUse" primitiveUnits="objectBoundingBox" x="20" y="140" width="100" height="100">
      <feFlood flood-color="rgb(50%,50%,50%)" flood-opacity="1.0" x="0" y="0" height="1" width="1" result="grey-input"/>
      <feFlood flood-color="rgb(100%,0%,0%)" flood-opacity="1.0" x="0" y="0" width="1" height="1" result="displacement-map"/>
      <feDisplacementMap x="0" y="0" width="1" height="1" scale ="0.5" in="grey-input" in2="displacement-map" xChannelSelector="G" yChannelSelector="B"/>
    </filter>
    <filter id="OBBUSOUWhite" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" x="0" y="0" width="1" height="1">
      <feFlood flood-color="rgb(50%,50%,50%)" flood-opacity="1.0" x="140" y="140" height="100" width="100" result="grey-input"/>
      <feFlood flood-color="rgb(100%,100%,50%)" flood-opacity="1.0" x="140" y="140" width="100" height="100" result="displacement-map"/>
      <feDisplacementMap x="140" y="140" height="100" width="100" scale ="50.0" in="grey-input" in2="displacement-map" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
    <filter id="USOUUSOUGrey" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="260" y="140" width="100" height="100">
      <feFlood flood-color="rgb(50%,50%,50%)" flood-opacity="1.0" x="260" y="140" height="100" width="100" result="grey-input"/>
      <feFlood flood-color="rgb(50%,50%,50%)" flood-opacity="1.0" x="260" y="140" width="100" height="100" result="displacement-map"/>
      <feDisplacementMap x="260" y="140" width="100" height="100" scale ="100" in="grey-input" in2="displacement-map" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>

  <rect filter="url(#oBBoBBWhiteScale)" fill="none" stroke="none" x="20" y="20" width="100" height="100"/>
  <rect fill="none" stroke="green" x="20" y="20" width="75" height="75"/>
  <rect filter="url(#oBBoBBLight)" fill="none" stroke="none" x="140" y="20" width="100" height="100"/>
  <rect fill="none" stroke="green" x="186" y="20" width="54" height="75"/>
  <rect filter="url(#oBBoBBDark)" fill="none" stroke="none" x="260" y="20" width="100" height="100"/>
  <rect fill="none" stroke="green" x="304" y="64" width="56" height="56"/>

  <rect filter="url(#USOUOBBBlackScale)" fill="none" stroke="green" x="20" y="140" width="100" height="100"/>
  <rect fill="none" stroke="green" x="44" y="164" width="76" height="76"/>
  <rect filter="url(#OBBUSOUWhite)" fill="none" stroke="none" x="140" y="140" width="100" height="100"/>
  <rect fill="none" stroke="green" x="140" y="140" width="75" height="75"/>
  <rect filter="url(#USOUUSOUGrey)" fill="none" stroke="none" x="260" y="140" width="100" height="100"/>
  <rect fill="none" stroke="green" x="287" y="167" width="73" height="73"/>
</svg>