fegram.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="612" height="826" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
    <defs>
        <!-- Instagram 1977 filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/abOwXWv -->
        <filter id="1977"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncG type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncB type="linear" slope="1.1" intercept="-0.05"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1"/>
                <feFuncG type="linear" slope="1.1"/>
                <feFuncB type="linear" slope="1.1"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix in="SourceGraphic" type="saturate" values="1.3"/>
            <feFlood flood-color="rgb(248,106,188)" flood-opacity=".3" />
            <!--<feImage xlink:href="#1977sc" result="grad" x="0" y="0"/> -->
            <feBlend mode="screen" in="SourceGraphic" />
        </filter>
        <!-- screen on filtered image -->
        <rect id="1977sc" x="0" y="0" width="100%" height="100%" fill-opacity=".3" mix-blend-mode="screen" fill="rgb(248,106,188)"/>

        <!-- Instagram Aden filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/gOpMzPZ -->
        <linearGradient id="gradient_aden">
            <stop offset="0%" stop-color="#420A18" stop-opacity="100%" />
            <stop offset="100%" stop-color="#420A18" stop-opacity="0%" />
        </linearGradient>
        <!-- screen on filtered image -->
        <rect id="adensc" x="0" y="0" width="100%" height="100%" fill-opacity=".2" fill="url(#gradient_aden)" />
        <filter id="aden"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!--hue-rotate -->
            <feColorMatrix type="hueRotate" values="-20"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope=".9" intercept="0.05"/>
                <feFuncG type="linear" slope=".9" intercept="0.05"/>
                <feFuncB type="linear" slope=".9" intercept="0.05"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer result="hcb">
                <feFuncR type="linear" slope="1.2"/>
                <feFuncG type="linear" slope="1.2"/>
                <feFuncB type="linear" slope="1.2"/>
            </feComponentTransfer>
            <!-- blend mode -->
            <feImage xlink:href="#adensc" result="grad" x="0" y="0" width="100%" height="100%"/>
            <feBlend mode="darken" in="hcb" />
        </filter>

        <!-- Instagram Brooklyn filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/bGdgKVP -->
        <radialGradient id="gradient_brooklyn">
            <!-- <stop offset="70%" stop-color="#A8DFC1" stop-opacity="40%" />
            <stop offset="100%" stop-color="#B7C4C8" stop-opacity="100%" /> -->
            <stop offset="70%" stop-color="rgba(168, 223, 193, 0.4)" stop-opacity="100%" />
            <stop offset="100%" stop-color="#c4b7c8" stop-opacity="100%" />
        </radialGradient>   
        <!-- screen on filtered image -->
        <rect id="brooksc" x="0" y="0" width="100%" height="100%" fill-opacity=".3" fill="url(#gradient_brooklyn)"/>
        <filter id="brooklyn"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.9" intercept="0.05"/>
                <feFuncG type="linear" slope="0.9" intercept="0.05"/>
                <feFuncB type="linear" slope="0.9" intercept="0.05"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer result="cb">
                <feFuncR type="linear" slope="1.1"/>
                <feFuncG type="linear" slope="1.1"/>
                <feFuncB type="linear" slope="1.1"/>
            </feComponentTransfer>
            <feImage xlink:href="#brooksc" result="grad" x="0" y="0"/>
            <feBlend mode="overlay" in="cb" />
        </filter>

        <!-- Instagram Kelvin filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/xxGOarp -->
        <filter id="kelvin"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <feFlood flood-color="#382c34"/>
            <feBlend mode="color-dodge" in2="SourceGraphic" result="color-dodge"/>
            <feFlood flood-color="#b77d21"/>
            <feBlend mode="overlay" in2="color-dodge"/>
        </filter>

        <!-- Instagram Brannan filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/Poqjgxp -->
        <filter id="brannan"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.5 -->
            <feColorMatrix type="matrix"
                           values="0.6965 0.3845 0.0945 0 0
                                   0.1745 0.843  0.084  0 0
                                   0.136  0.267  0.5655 0 0
                                   0      0      0      1 0" />
            <!-- contrast -->
            <feComponentTransfer result="sc">
                <feFuncR type="linear" slope="1.4" intercept="0.025"/>
                <feFuncG type="linear" slope="1.4" intercept="0.025"/>
                <feFuncB type="linear" slope="1.4" intercept="0.025"/>
            </feComponentTransfer>
            <feFlood flood-color="rgb(161,44,199,.31)"/>
            <feBlend mode="lighten" in="sc" />
        </filter>

        <!-- Instagram Earlybird filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/xxGOava -->
        <radialGradient id="gradient_earlybird">
            <stop offset="20%" stop-color="#d0ba8e" stop-opacity="100%" />
            <stop offset="85%" stop-color="#360309" stop-opacity="100%" />
            <stop offset="100%" stop-color="#1d0210" stop-opacity="100%" />
        </radialGradient>
        <!-- Create a rectangle and apply the gradient as its fill -->
        <rect id="earlybirdsc" x="0%" y="0%" width="100%" height="100%" fill="url(#gradient_earlybird)" fill-opacity="0.3"/>
        <filter id="earlybird"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.9" intercept="0.05"/>
                <feFuncG type="linear" slope="0.9" intercept="0.05"/>
                <feFuncB type="linear" slope="0.9" intercept="0.05"/>
            </feComponentTransfer>
            <!-- sepia 0.2-->
            <feColorMatrix result="cs" type="matrix" values="
                        0.8786 0.1538 0.0378 0 0
                        0.0698 0.9372 0.0336 0 0
                        0.0544 0.1068 0.8262 0 0
                        0 0 0 1 0"/>
            <feImage xlink:href="#earlybirdsc" result="grad" x="0" y="0"/>
            <feBlend mode="overlay" in="cs" />
        </filter>

        <!-- Instagram Gingham filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/mdJRgyW -->
        <!-- <linearGradient id="gradient_gingham">
            <stop offset="100%" stop-color="#e6e6fa" stop-opacity="20%" />
            <stop offset="0%" stop-color="black" stop-opacity="0%" />
        </linearGradient>
        <rect id="ginghamsc" x="0" y="0" width="100%" height="100%" fill-opacity=".3" fill="url(#gradient_gingham)"/> -->
        <filter id="gingham"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.05"/>
                <feFuncG type="linear" slope="1.05"/>
                <feFuncB type="linear" slope="1.05"/>
            </feComponentTransfer>
            <!-- hue rotate -->
            <feColorMatrix type="hueRotate" values="-10" result="bh"/>
            <!-- blend mode -->
            <!-- <feImage xlink:href="#ginghamsc" result="grad" x="0" y="0"/>
            <feBlend mode="soft-light" in2="bh" /> -->
            <feFlood flood-color="#e6e6fa" flood-opacity="1" />
            <feBlend mode="soft-light" in2="bh" />
        </filter>

        <!-- Instagram Hudson filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/YzXNvNO -->
        <radialGradient id="gradient_hudson" r="65%">
            <!-- <stop offset="50%" stop-color="rgb(255, 177, 166)" stop-opacity="100%" />
            <stop offset="100%" stop-color="rgb(52, 33, 52)" stop-opacity="100%" /> -->
            <stop offset="50%" stop-color="#a6b1ff" stop-opacity="100%" />
            <stop offset="100%" stop-color="#342134" stop-opacity="100%" />
        </radialGradient>
        <!-- screen on filtered image -->
        <rect id="hudsonsc" x="0" y="0" width="100%" height="100%" fill-opacity=".5" fill="url(#gradient_hudson)"/>
        <filter id="hudson"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.2"/>
                <feFuncG type="linear" slope="1.2"/>
                <feFuncB type="linear" slope="1.2"/>
            </feComponentTransfer>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.9" intercept="0.05"/>
                <feFuncG type="linear" slope="0.9" intercept="0.05"/>
                <feFuncB type="linear" slope="0.9" intercept="0.05"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix type="saturate" values="1.1" result="bch"/>
            <!-- blend mode -->
            <feImage xlink:href="#hudsonsc" result="grad" x="" y="0" width="100%" height="100%"/>
            <feBlend mode="multiply" in="bch" />
        </filter>

        <!-- Instagram Inkwell filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/gOpRJgX -->
        <filter id="inkwell"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.3 -->
            <feColorMatrix type="matrix" values="
                        0.8179 0.2307 0.0567 0 0
                        0.1047 0.9058 0.0504 0 0
                        0.0816 0.1602 0.7393 0 0
                        0 0 0 1 0"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncG type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncB type="linear" slope="1.1" intercept="-0.05"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1"/>
                <feFuncG type="linear" slope="1.1"/>
                <feFuncB type="linear" slope="1.1"/>
            </feComponentTransfer>
            <!-- grayscale 100% -->
            <feColorMatrix type="saturate" values="0"/>
        </filter>

        <!-- Instagram Lo-Fi filter too dark -->
        <!-- https://codepen.io/BuZZ-dEE/pen/QWbdxgj -->
        <radialGradient id="gradient_lofi">
            <stop offset="70%" stop-color="black" stop-opacity="0%" />
            <stop offset="150%" stop-color="#222222" stop-opacity="100%" />
        </radialGradient>
        <!-- screen on filtered image -->
        <rect id="lofisc" x="0" y="0" width="100%" height="100%" fill-opacity=".5" fill="url(#gradient_lofi)"/>
        <filter id="lofi"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- saturate -->
            <feColorMatrix in="SourceGraphic" type="saturate" values="1.1"/>
            <!-- contrast -->
            <feComponentTransfer result="sc">
                <feFuncR type="linear" slope="1.5" intercept="-0.25"/>
                <feFuncG type="linear" slope="1.5" intercept="-0.25"/>
                <feFuncB type="linear" slope="1.5" intercept="-0.25"/>
            </feComponentTransfer>
            <!-- blend mode -->
            <feImage xlink:href="#lofisc" result="grad" x="" y="0" width="100%" height="100%"/>
            <feBlend mode="multiply" in="sc" />
        </filter>

        <!-- Instagram Walden filter not blue enough -->
        <!-- https://codepen.io/BuZZ-dEE/pen/VwLWOWp -->
        <filter id="walden"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1"/>
                <feFuncG type="linear" slope="1.1"/>
                <feFuncB type="linear" slope="1.1"/>
            </feComponentTransfer>
            <!-- hue rotate -->
            <feColorMatrix type="hueRotate" values="350"/>
            <!-- sepia 0.3 -->
            <feColorMatrix type="matrix"
                         values="
                0.8179 0.2307 0.0567 0 0
                0.1047 0.9058 0.0504 0 0
                0.0816 0.1602 0.7393 0 0
                0 0 0 1 0"/>
            <!-- saturate -->
            <feColorMatrix result="bhss" type="saturate" values="1.6"/>
            <!-- blend mode -->
            <feFlood flood-color="##0044cc" flood-opacity=".3" />
            <feBlend mode="screen" in="bhss"  />
        </filter>

        <!-- Instagram Reyes filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/yLNXWor -->
        <filter id="reyes"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.2 -->
            <feColorMatrix type="matrix"
                         values="
                0.86646 0.16918 0.04158 0 0
                0.07678 0.93092 0.03696 0 0
                0.05984 0.11748 0.80882 0 0
                0 0 0 1 0"/>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1"/>
                <feFuncG type="linear" slope="1.1"/>
                <feFuncB type="linear" slope="1.1"/>
            </feComponentTransfer>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.85" intercept="0.075"/>
                <feFuncG type="linear" slope="0.85" intercept="0.075"/>
                <feFuncB type="linear" slope="0.85" intercept="0.075"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="sbcs" type="saturate" values=".75"/>
            <!-- blend mode -->
            <feFlood flood-color="#efcdad" flood-opacity=".5" />
            <feBlend mode="soft-light" in2="sbcs" />
        </filter>

        <!-- Instagram X-pro II filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/NWqgVYE -->
        <radialGradient id="gradient_xpro">
            <stop offset="40%" stop-color="#e6e7e0" stop-opacity="100%"/>
            <stop offset="110%" stop-color="rgb(43,42,161, 0.6)"/>
        </radialGradient>
        <!-- Create a rectangle and apply the gradient as its fill -->
        <rect id="xprosc" x="0" y="0" width="100%" height="100%" fill="url(#gradient_xpro)" fill-opacity="0.3"/>
        <filter id="xpro2"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.3 -->
            <feColorMatrix result="sepia" type="matrix"
                         values="
                0.8179 0.2307 0.0567 0 0
                0.1047 0.9058 0.0504 0 0
                0.0816 0.1602 0.7393 0 0
                0 0 0 1 0"/>
            <!-- blend mode -->
            <feImage xlink:href="#xprosc" result="grad" x="0" y="0"/>
            <feBlend mode="color-burn" in2="sepia" />
        </filter>

        <!-- Instagram Toaster filter not equal to cssgram-->
        <!-- https://codepen.io/BuZZ-dEE/pen/NWqgVoJ -->
        <radialGradient id="gradient_toaster">
            <stop offset="100%" stop-color="#804e0f" stop-opacity="100%" />
            <stop offset="100%" stop-color="#3b003b" stop-opacity="100%" />
        </radialGradient>
        <!-- Create a rectangle and apply the gradient as its fill -->
        <rect id="toastersc" x="0" y="0" width="100%" height="100%" fill="url(#gradient_toaster)" fill-opacity=".3" />
        <filter id="toaster"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.5" intercept="-0.25"/>
                <feFuncG type="linear" slope="1.5" intercept="-0.25"/>
                <feFuncB type="linear" slope="1.5" intercept="-0.25"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer result="cb">
                <feFuncR type="linear" slope=".9"/>
                <feFuncG type="linear" slope=".9"/>
                <feFuncB type="linear" slope=".9"/>
            </feComponentTransfer>
            <!-- blend mode -->
            <feImage xlink:href="#toastersc" result="grad" x="0" y="0"/>
            <feBlend mode="screen" in2="cb" />
        </filter>

        <!-- Instagram Maven filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/QWbgRPR -->
        <filter id="maven"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.25 -->
            <feColorMatrix type="matrix"
                         values="
                0.84825 0.19225 0.04725 0 0
                0.08725 0.9215 0.042 0 0
                0.068 0.1335 0.78275 0 0
                0 0 0 1 0"/>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope=".95"/>
                <feFuncG type="linear" slope=".95"/>
                <feFuncB type="linear" slope=".95"/>
            </feComponentTransfer>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.95" intercept="0.025"/>
                <feFuncG type="linear" slope="0.95" intercept="0.025"/>
                <feFuncB type="linear" slope="0.95" intercept="0.025"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="sbcs" type="saturate" values="1.5"/>
            <!-- blend mode -->
            <feFlood flood-color="rgba(3, 230, 26, 0.2)" flood-opacity="1"/>
            <feBlend mode="hue" in2="sbcs"/>
        </filter>

        <!-- Instagram Moon filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/zYGNjQo -->
        <filter id="moon"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- grayscale 100% -->
            <feColorMatrix type="saturate" values="0"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncG type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncB type="linear" slope="1.1" intercept="-0.05"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer result="gcb">
                <feFuncR type="linear" slope="1.1"/>
                <feFuncG type="linear" slope="1.1"/>
                <feFuncB type="linear" slope="1.1"/>
            </feComponentTransfer>
            <!-- blend mode -->
            <feFlood flood-color="#a0a0a0" />
            <feBlend mode="soft-light" in2="gcb" result="gcbsl" />
            <feFlood flood-color="#383838" />
            <feBlend mode="lighten" in="gcbsl" />
        </filter>

        <!-- Instagram Perpetua filter css to bottom how to do that?-->
        <!-- https://codepen.io/BuZZ-dEE/pen/JjdJQjJ -->
        <linearGradient id="gradient_perpetua">
            <stop offset="0%" stop-color="#005b9a" stop-opacity="100%" />
            <stop offset="100%" stop-color="#e6c13d" stop-opacity="100%" />
        </linearGradient>
        <!-- Create a rectangle and apply the gradient as its fill -->
        <rect id="perpetuasc" x="0" y="0" width="100%" height="100%" fill="url(#gradient_perpetua)" fill-opacity=".5"/>
        <filter id="perpetua"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- blend mode -->
            <feImage xlink:href="#perpetuasc" result="grad" x="0" y="0"/>
            <feBlend mode="soft-light" in2="SourceGraphic" />
        </filter>

        <!-- Instagram Clarendon filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/YzXxxpo -->
        <filter id="clarendon"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncG type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncB type="linear" slope="1.2" intercept="-0.1"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="cs" type="saturate" values="1.35"/>
            <feFlood flood-color="rgba(127, 187, 227, 0.2)"/>
            <feBlend mode="overlay" in2="cs" />
        </filter>

        <!-- Instagram Lark filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/BaNddwL -->
        <filter id="lark"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer result="contrast">
                <feFuncR type="linear" slope="0.9" intercept="0.05"/>
                <feFuncG type="linear" slope="0.9" intercept="0.05"/>
                <feFuncB type="linear" slope="0.9" intercept="0.05"/>
            </feComponentTransfer>
            <feFlood flood-color="rgba(242, 242, 242, 0.8)"/>
            <feBlend mode="darken" in="contrast" result="darken"/>
            <feFlood flood-color="#22253f" flood-opacity="1" />
            <feBlend mode="color-dodge" in2="darken" />
        </filter>

        <!-- Instagram Mayfair filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/mdJMByO -->
        <radialGradient id="gradient_mayfair" cx="40%" cy="40%">
            <stop stop-color="rgba(255, 255, 255, 0.8)"/>
            <stop stop-color="rgba(255, 200, 200, 0.6)"/>
            <stop offset="60%" stop-color="#111111" />
        </radialGradient>
        <!-- screen on filtered image -->
        <rect id="mayfairsc" x="0" y="0" width="100%" height="100%" fill-opacity=".4" fill="url(#gradient_mayfair)"/>
        <filter id="mayfair"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncG type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncB type="linear" slope="1.1" intercept="-0.05"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="cs" type="saturate" values="1.1"/>
            <!-- blend mode -->
            <feImage xlink:href="#mayfairsc"/>
            <feBlend mode="overlay" in2="cs"/>
        </filter>

        <!-- Instagram Nashville filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/gOpxjoq -->
        <filter id="nashville"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.2 -->
            <feColorMatrix type="matrix"
                         values="
                0.8786 0.1538 0.0378 0 0
                0.0698 0.9372 0.0336 0 0
                0.0544 0.1068 0.8262 0 0
                0 0 0 1 0"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncG type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncB type="linear" slope="1.2" intercept="-0.1"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.05"/>
                <feFuncG type="linear" slope="1.05"/>
                <feFuncB type="linear" slope="1.05"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="scbs" type="saturate" values="1.2"/>
            <feFlood flood-color="rgba(247, 176, 153, 0.56)"/>
            <feBlend mode="darken" in2="scbs" result="scbsd" />
            <feFlood flood-color="rgba(0, 70, 150, 0.4)"/>
            <feBlend mode="lighten" in2="scbsd" />
        </filter>

        <!-- Instagram Rise filter  not 100% equal -->
        <!-- https://codepen.io/BuZZ-dEE/pen/ExjvpBo -->
        <radialGradient id="gradient_rise_before">
            <stop offset="55%" stop-color="rgba(236, 205, 169, 0.15)"/>
            <stop offset="100%" stop-color="rgba(50, 30, 7, 0.4)"/>
        </radialGradient>
        <radialGradient id="gradient_rise_after">
            <stop offset="0%" stop-color="rgba(232, 197, 152, 0.8)"/>
            <stop offset="90%" stop-color="#000" stop-opacity="0"/>
        </radialGradient>   
        <!-- screen on filtered image -->
        <rect id="risesc_before" x="0" y="0" width="100%" height="100%" fill="url(#gradient_rise_before)"/>
        <rect id="risesc_after" x="0" y="0" width="100%" height="100%" fill-opacity=".6" fill="url(#gradient_rise_after)"/>
        <filter id="rise"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.05"/>
                <feFuncG type="linear" slope="1.05"/>
                <feFuncB type="linear" slope="1.05"/>
            </feComponentTransfer>
            <!-- sepia 0.2 -->
            <feColorMatrix type="matrix"
                         values="
                0.8786 0.1538 0.0378 0 0
                0.0698 0.9372 0.0336 0 0
                0.0544 0.1068 0.8262 0 0
                0 0 0 1 0"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.9" intercept="0.05"/>
                <feFuncG type="linear" slope="0.9" intercept="0.05"/>
                <feFuncB type="linear" slope="0.9" intercept="0.05"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="bscs" type="saturate" values="0.9"/>
            <!-- blend mode -->
            <feImage xlink:href="#risesc_before" result="grad_risesc_before" x="0" y="0"/>
            <feBlend mode="multiply" in2="grad_risesc_before"/>
            <feImage xlink:href="#risesc_after" result="grad_risesc_after" x="0" y="0"/>
            <feBlend mode="overlay" in="bscs" in2="grad_risesc_after" />
        </filter>

        <!-- Instagram Slumber filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/YzXxOJP -->
        <filter id="slumber"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- saturate -->
            <feColorMatrix in="SourceGraphic" type="saturate" values="0.66"/>
            <!-- brightness -->
            <feComponentTransfer result="sb">
                <feFuncR type="linear" slope="1.05"/>
                <feFuncG type="linear" slope="1.05"/>
                <feFuncB type="linear" slope="1.05"/>
            </feComponentTransfer>
            <feFlood flood-color="rgba(69, 41, 12, 0.4)"/>
            <feBlend mode="lighten" in="sb" result="sbl" />
            <feFlood flood-color="rgba(125, 105, 24, 0.5)"/>
            <feBlend mode="soft-light" in2="sbl" />
        </filter>

        <!-- Instagram Stinson filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/yLNoxwj -->
        <filter id="stinson"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.75" intercept="0.125"/>
                <feFuncG type="linear" slope="0.75" intercept="0.125"/>
                <feFuncB type="linear" slope="0.75" intercept="0.125"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix type="saturate" values="0.85"/>
            <!-- brightness -->
            <feComponentTransfer result="csb">
                <feFuncR type="linear" slope="1.15"/>
                <feFuncG type="linear" slope="1.15"/>
                <feFuncB type="linear" slope="1.15"/>
            </feComponentTransfer>
            <feFlood flood-color="rgba(240, 149, 128, 0.2)"/>
            <feBlend mode="soft-light" in2="csb" />
        </filter>

        <!-- Instagram Valencia filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/WNvEgVX -->
        <filter id="valencia"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.08" intercept="-0.04"/>
                <feFuncG type="linear" slope="1.08" intercept="-0.04"/>
                <feFuncB type="linear" slope="1.08" intercept="-0.04"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.08"/>
                <feFuncG type="linear" slope="1.08"/>
                <feFuncB type="linear" slope="1.08"/>
            </feComponentTransfer>
            <!-- sepia 0.08 -->
            <feColorMatrix result="cbs" type="matrix"
                         values="
                0.95144 0.06152 0.01512 0 0
                0.02792 0.97488 0.01344 0 0
                0.02176 0.04272 0.93048 0 0
                0 0 0 1 0"/>
            <feFlood flood-color="#3a0339" flood-opacity=".5"/>
            <feBlend mode="exclusion" in2="cbs"/>
        </filter>

        <!-- Instagram Willow filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/dyozEyP -->
        <radialGradient id="gradient_willow" cx="40%">
            <stop offset="55%" stop-color="#d4a9af" stop-opacity="0%"/>
            <stop offset="150%" stop-color="black" stop-opacity="0%"/>
        </radialGradient>
       
        <!-- Create a rectangle and apply the gradient as its fill -->
        <!-- <rect id="willowsc" x="0%" y="0%" width="100%" height="100%" fill="url(#gradient_willow)" fill-opacity="0.5" mix-blend-mode="overlay"/> -->
        <rect id="willowsc" x="0" y="0" width="100%" height="100%" fill="url(#gradient_willow)" fill-opacity="1"/>
       
        <filter id="willow" color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- grayscale 0.5 -->
            <feColorMatrix type="matrix"
                           values="0,6063 0.3576 0.0361 0 0
                                   0.1063 0.8576 0.0361 0 0
                                   0.1063 0.3576 0.5361 0 0
                                   0 0 0 1 0"/>
          
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.95" intercept="0.025"/>
                <feFuncG type="linear" slope="0.95" intercept="0.025"/>
                <feFuncB type="linear" slope="0.95" intercept="0.025"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer result="gcb">
                <feFuncR type="linear" slope="0.9"/>
                <feFuncG type="linear" slope="0.9"/>
                <feFuncB type="linear" slope="0.9"/>
            </feComponentTransfer>
            <!-- blend mode -->
            <feImage xlink:href="#willowsc" result="grad" x="0" y="0"/>
            <feBlend mode="overlay" in2="gcb" result="gcbblend" />
            <feFlood flood-color="#d8cdcb" flood-opacity="1"/>
            <feBlend mode="color" in2="gcbblend" />
        </filter>

        <!-- Instagram Hefe filter -->
        <filter id="hefe"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.3" intercept="-0.15"/>
                <feFuncG type="linear" slope="1.3" intercept="-0.15"/>
                <feFuncB type="linear" slope="1.3" intercept="-0.15"/>
            </feComponentTransfer>
            <!-- sepia 0.3 -->
            <feColorMatrix type="matrix"
                         values="
                0.8179 0.2307 0.0567 0 0
                0.1047 0.9058 0.0504 0 0
                0.0816 0.1602 0.7393 0 0
                0 0 0 1 0"/>
            <!-- saturate -->
            <feColorMatrix type="saturate" values="1.3"/>
            <!--hue-rotate -->
            <feColorMatrix type="hueRotate" values="-10"/>
            <!-- brightness -->
            <feComponentTransfer result="csshb">
                <feFuncR type="linear" slope="0.95"/>
                <feFuncG type="linear" slope="0.95"/>
                <feFuncB type="linear" slope="0.95"/>
            </feComponentTransfer>
            <feFlood flood-color="rgba(243, 106, 188, 0)" flood-opacity="1"/>
            <feBlend mode="initial" in2="csshb"/>
        </filter>
        
        <!-- pixelfed Instagram Ashby filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/XWbZBXy -->
        <filter id="ashby"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.5 -->
            <feColorMatrix type="matrix"
                         values="
                0.6965 0.3845 0.0945 0 0
                0.1745 0.843 0.084 0 0
                0.136 0.267 0.5655 0 0
                0 0 0 1 0"/>
            <!-- contrast 1.2 -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncG type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncB type="linear" slope="1.2" intercept="-0.1"/>
            </feComponentTransfer>
            <!-- saturate 1.8 -->
            <feColorMatrix type="saturate" values="1.8" result="scs"/>
            <feFlood flood-color="rgba(125,105,24,1)" flood-opacity=".35"/>
            <feBlend mode="lighten" in="scs"/>
        </filter>

        <!-- pixelfed Instagram Charmes filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/JjdpBLo -->
        <filter id="charmes"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.25 -->
            <feColorMatrix type="matrix" values="
                        0.84825 0.19225 0.04725 0 0
                        0.08725 0.9215 0.042 0 0
                        0.068 0.1335 0.78275 0 0
                        0 0 0 1 0"/>
            <!-- contrast 1.25 -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.25" intercept="-0.125"/>
                <feFuncG type="linear" slope="1.25" intercept="-0.125"/>
                <feFuncB type="linear" slope="1.25" intercept="-0.125"/>
            </feComponentTransfer>
            <!-- brightness 1.25 -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.25"/>
                <feFuncG type="linear" slope="1.25"/>
                <feFuncB type="linear" slope="1.25"/>
            </feComponentTransfer>
            <!-- saturate 1.35 -->
            <feColorMatrix type="saturate" values="1.35"/>
            <!--hue-rotate -5deg -->
            <feColorMatrix type="hueRotate" values="-5" result="scbsh"/>
            <feFlood flood-color="rgba(125,105,24,.25)" flood-opacity="1"/>
            <feBlend mode="darken" in2="scbsh"/>
        </filter>

        <!-- CSSgram Instagram Vesper filter -->
        <filter id="vesper"
                        color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!--hue-rotate -->
            <feColorMatrix type="hueRotate" values="-10"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.9" intercept="0.05"/>
                <feFuncG type="linear" slope="0.9" intercept="0.05"/>
                <feFuncB type="linear" slope="0.9" intercept="0.05"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix type="saturate" values=".9"/>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.2"/>
                <feFuncG type="linear" slope="1.2"/>
                <feFuncB type="linear" slope="1.2"/>
            </feComponentTransfer>
            <!-- sepia 0.1 -->
            <feColorMatrix result="hcsbs" type="matrix"
                         values="
                0.9393 0.0769 0.0189 0 0
                0.0349 0.9686 0.0168 0 0
                0.0272 0.0534 0.9131 0 0
                0 0 0 1 0"/>
            <feFlood flood-color="rgba(220, 250, 40, .1)" flood-opacity="1"/>
            <feBlend mode="darken" in2="hcsbs"/>
        </filter>

        <!-- CSSgram Instagram Ginza filter -->
        <filter id="ginza"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- sepia 0.2-->
            <feColorMatrix type="matrix" values="
                        0.8786 0.1538 0.0378 0 0
                        0.0698 0.9372 0.0336 0 0
                        0.0544 0.1068 0.8262 0 0
                        0 0 0 1 0"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncG type="linear" slope="1.2" intercept="-0.1"/>
                <feFuncB type="linear" slope="1.2" intercept="-0.1"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.05"/>
                <feFuncG type="linear" slope="1.05"/>
                <feFuncB type="linear" slope="1.05"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="scbs" type="saturate" values="1.2"/>
            <feFlood flood-color="rgba(247, 176, 153, .56)" flood-opacity="1"/>
            <feBlend mode="darken" in2="scbs" result="scbsfb"/>
            <feFlood flood-color="rgba(0, 70, 150, .4)" flood-opacity="1"/>
            <feBlend mode="lighten" in2="scbsfb"/>
        </filter>

        <!-- CSSgram Instagram Ludwig filter -->
        <filter id="ludwig"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- saturate -->
            <feColorMatrix result="scbs" type="saturate" values=".8"/>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.15" intercept="-0.075"/>
                <feFuncG type="linear" slope="1.15" intercept="-0.075"/>
                <feFuncB type="linear" slope="1.15" intercept="-0.075"/>
            </feComponentTransfer>
            <!-- grayscale 0.25 -->
            <feColorMatrix type="matrix" values="
                0.80315 0.1788 0.01805 0 0
                0.05315 0.9288 0.01805 0 0
                0.05315 0.1788 0.76805 0 0
                0 0 0 1 0"/>
        </filter>

        <!-- CSSgram Instagram Amaro filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/dyomqZW -->
        <radialGradient id="gradient_amaro" cx="29%" cy="33%">
            <stop offset="0%" stop-color="rgba(85, 78, 136, 0.28)" stop-opacity="100%" />
            <stop offset="50%" stop-color="rgb(72, 17, 76)" stop-opacity="100%" />
            <stop offset="97%" stop-color="#540d80" stop-opacity="100%" />
        </radialGradient>   
        <!-- screen on filtered image -->
        <rect id="amarosc" x="0" y="0" width="100%" height="100%" fill-opacity=".4" fill="url(#gradient_amaro)"/>
        <filter id="amaro"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!--hue-rotate -->
            <feColorMatrix type="hueRotate" values="-2"/>
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.9"/>
                <feFuncG type="linear" slope="0.9"/>
                <feFuncB type="linear" slope="0.9"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix result="hcbs" type="saturate" values="1.1"/>
            <feImage xlink:href="#amarosc" result="grad" x="0" y="0"/>
            <feBlend mode="screen" in="hcbs" />
        </filter>

        <!-- CSSgram Instagram Sutro filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/eYNMLKN -->
        <filter id="sutro"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- brightness -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.75"/>
                <feFuncG type="linear" slope="0.75"/>
                <feFuncB type="linear" slope="0.75"/>
            </feComponentTransfer>
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.3" intercept="-0.15"/>
                <feFuncG type="linear" slope="1.3" intercept="-0.15"/>
                <feFuncB type="linear" slope="1.3" intercept="-0.15"/>
            </feComponentTransfer>
            <!-- sepia 0.5 -->
            <feColorMatrix type="matrix"
                        values="0.6965 0.3845 0.0945 0 0
                                0.1745 0.843 0.084 0 0
                                0.136 0.267 0.5655 0 0
                                0 0 0 1 0"/>
            <!--hue-rotate -->
            <feColorMatrix result="bcsh" type="hueRotate" values="-25"/>
            <feFlood flood-color="rgba(0, 70, 150, 0)" flood-opacity="1"/>
            <feBlend mode="initial" in2="bcsh"/>
        </filter>

        <!-- CSSgram Instagram Sierra filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/NWqYLOJ -->
        <filter id="sierra"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="0.8" intercept="0.1"/>
                <feFuncG type="linear" slope="0.8" intercept="0.1"/>
                <feFuncB type="linear" slope="0.8" intercept="0.1"/>
            </feComponentTransfer>
            <!-- saturate -->
            <feColorMatrix type="saturate" values="1.2"/>
            <!-- sepia 0.15 -->
            <feColorMatrix  result="css" type="matrix"
                    values="0.90895 0.11535 0.02835 0 0
                            0.05235 0.9529 0.0252 0 0
                            0.0408 0.0801 0.86965 0 0
                            0 0 0 1 0"/>
            <feFlood flood-color="rgba(0, 70, 150, 0)" flood-opacity="1"/>
            <feBlend mode="initial" in2="css"/>
        </filter>

        <!-- CSSgram Instagram Helena filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/jOPzgog -->
        <filter id="helena"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- hue-rotate -->
            <feColorMatrix type="hueRotate" values="-18"/>
            <!-- sepia 0.3 -->
            <feColorMatrix type="matrix"
                        values="0.8179 0.2307 0.0567 0 0
                                0.1047 0.9058 0.0504 0 0
                                0.0816 0.1602 0.7393 0 0
                                0 0 0 1 0"/>
            <!-- saturate -->
            <feColorMatrix type="saturate" values="1.3" result="hss"/>
            <feFlood flood-color="#007ccc" flood-opacity=".3"/>
            <feBlend mode="soft-light" in2="hss"/>
        </filter>

        <!-- CSSgram Instagram Skyline filter -->
        <!-- https://codepen.io/BuZZ-dEE/pen/poJVzRg -->
        <filter id="skyline"
                color-interpolation-filters="sRGB"
                filterUnits="objectBoundingBox"
                primitiveUnits="objectBoundingBox"
                x="0" y="0" width="100%" height="100%">
            <!-- contrast -->
            <feComponentTransfer>
                <feFuncR type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncG type="linear" slope="1.1" intercept="-0.05"/>
                <feFuncB type="linear" slope="1.1" intercept="-0.05"/>
            </feComponentTransfer>
            <!-- brightness -->
            <feComponentTransfer result="cb">
                <feFuncR type="linear" slope="1.2"/>
                <feFuncG type="linear" slope="1.2"/>
                <feFuncB type="linear" slope="1.2"/>
            </feComponentTransfer>
            <feFlood flood-color="rgba(93, 101, 186, 0.2)" flood-opacity="1"/>
            <feBlend mode="overlay" in2="cb"/>
        </filter>

    </defs>

    <defs>
        <image transform="scale(.7)" xlink:href="https://una.im/CSSgram/img/bike.jpg"
               id="imageOriginal0" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/>
        <image transform="scale(.7)" xlink:href="https://una.im/CSSgram/img/cacti.jpg"
               id="imageOriginal1" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/>
        <image transform="scale(.7)" xlink:href="https://una.im/CSSgram/img/atx.jpg"
               id="imageOriginal2" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/>
        <image transform="scale(.7)" xlink:href="https://una.im/CSSgram/img/lakegeneva.jpg"
               id="imageOriginal3" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/>
        <image transform="scale(.7)" xlink:href="https://una.im/CSSgram/img/tahoe.jpg"
               id="imageOriginal4" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/>
        <image transform="scale(.9)" xlink:href="https://media.istockphoto.com/photos/making-time-to-reconnect-as-a-couple-picture-id525025496?k=6&m=525025496&s=612x612&w=0&h=u4WJq6wf9SA6PZmiNSsJh3o5emyrNlniTJDu0KrQAPk="
               id="imageOriginal" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/> 
    </defs>

    <use xlink:href="#imageOriginal" filter="url(#skyline)" />
    <use xlink:href="#imageOriginal" y="50%" />
</svg>