Add Skyline filter effect

BuZZ-dEE · BuZZ-dEE · commit 6b9330d6fe5b · 2020-03-15T01:59:59.000+01:00
According to pull request for CSSgram una/CSSgram#235
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
                                         
                                                 
 
-## 36 [Instagram filter effects in SVG][0]
+## 37 [Instagram filter effects in SVG][0]
 
 ### filter ids
 
@@ -47,6 +47,7 @@
 - [sutro][34]
 - [sierra][35]
 - [helena][36]
+- [skyline][37]
 
 ### usage
 
@@ -89,3 +90,4 @@ filters are defined in **defs**. see how to use svg defs in html and css.
 [34]: https://codepen.io/BuZZ-dEE/pen/eYNMLKN
 [35]: https://codepen.io/BuZZ-dEE/pen/NWqYLOJ
 [36]: https://codepen.io/BuZZ-dEE/pen/jOPzgog
+[37]: https://codepen.io/BuZZ-dEE/pen/poJVzRg
diff --git a/fegram.svg b/fegram.svg
@@ -1000,7 +1000,7 @@
                 filterUnits="objectBoundingBox"
                 primitiveUnits="objectBoundingBox"
                 x="0" y="0" width="100%" height="100%">
-            <!--hue-rotate -->
+            <!-- hue-rotate -->
             <feColorMatrix type="hueRotate" values="-18"/>
             <!-- sepia 0.3 -->
             <feColorMatrix type="matrix"
@@ -1014,6 +1014,29 @@
             <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>
@@ -1031,6 +1054,6 @@
                id="imageOriginal" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/> 
     </defs>
 
-    <use xlink:href="#imageOriginal" filter="url(#helena)" />
+    <use xlink:href="#imageOriginal" filter="url(#skyline)" />
     <use xlink:href="#imageOriginal" y="50%" />
 </svg>
