SVG filter 8

index.html

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients -->

<svg 
  width="400"
  height="500"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
      <!--
        -- Define gradients
        -->
      <linearGradient id="vertical-grad" x1="0" y1="1" x2="0" y2="0">
        <stop stop-color = "white" offset = "0%"/>
        <stop stop-color = "black" offset = "100%"/>
      </linearGradient>
      <linearGradient id="horizontal-grad">
        <stop stop-color="white" offset = "0%"/>
        <stop stop-color="black" offset = "100%"/>
      </linearGradient>
      <linearGradient id="horizontal-grad-half">
        <stop stop-color="white" offset = "0%"/>
        <stop stop-color="rgb(50%,50%,50%)" offset = "100%"/>
      </linearGradient>
    
      <!--
        -- Define core objects
        -->
      <rect id="vertical-rect" x="0" y="0" width="100" height="100" fill="url(#vertical-grad)"/>
      <rect id="horizontal-rect" x="0" y="0" width="100" height="100" fill="url(#horizontal-grad)"/>
      <rect id="horizontal-rect-half" x="0" y="0" width="100" height="100" fill="url(#horizontal-grad-half)"/>
 
      <!--
        -- Define pinch filter
        -->
      <filter id="pinch"  color-interpolation-filters="sRGB">
        <feComponentTransfer in="SourceGraphic" result="bulbasaur">
          <feFuncR type="gamma" amplitude="0.5" exponent="-1"></feFuncR>
          <feFuncG type="gamma" amplitude="0.5" exponent="-1"></feFuncG>
          <feFuncB type="gamma" amplitude="0.5" exponent="-1"></feFuncB>
        </feComponentTransfer>
        <feImage x=0 y=0 xlink:href="#vertical-rect" result="ivysaur"/>
        <feBlend mode="multiply" in="bulbasaur" in2="ivysaur" result="venasaur"/>
        <feComponentTransfer in="venasaur">
          <feFuncR type="gamma" amplitude="2" exponent="1"></feFuncR>
          <feFuncG type="gamma" amplitude="2" exponent="1"></feFuncG>
          <feFuncB type="gamma" amplitude="2" exponent="1"></feFuncB>
        </feComponentTransfer>
      </filter>
  </defs>
  
  <!--
    -- Prepare vizer grid
    -->
  <use x="0.5" y="0.5" xlink:href="#vertical-rect" stroke="black" stroke-width="0.5"/>
  <use x="110.5" y="0.5" xlink:href="#horizontal-rect" stroke="black" stroke-width="0.5" />
  <use x="110.5" y="110.5" xlink:href="#horizontal-rect" filter="url(#pinch)"/>
  <use x="220.5" y="0.5" xlink:href="#horizontal-rect-half" stroke="black" stroke-width="0.5" />
  <use x="220.5" y="110.5" xlink:href="#horizontal-rect-half" filter="url(#pinch)"/>
  
  <!--
    -- Manually construct *full* pinch
    -->
  <g transform="skewY(0) translate(0,220)">
    <use x="0" y="0" xlink:href="#horizontal-rect-half" filter="url(#pinch)"/>
    <use x="0" y="0" xlink:href="#horizontal-rect-half" filter="url(#pinch)" 
         transform="translate(100,0) scale(0.5)"/>
    <use x="0" y="0" xlink:href="#horizontal-rect-half" filter="url(#pinch)" 
         transform="translate(150,0) scale(0.25)"/>
    <use x="0" y="0" xlink:href="#horizontal-rect-half" filter="url(#pinch)" 
         transform="translate(175,0) scale(0.125)"/>
  </g>
  
  <!--
    -- Transform *half* pinch
    -->
  <g transform="translate(0,330)">
    <use x="0" y="0" xlink:href="#horizontal-rect-half" filter="url(#pinch)"
         transform="skewY(45)"/>
  </g>
</svg>

svg-filter-8.markdown

SVG filter 8

A Pen by Edward FauchonJones on CodePen.

License.