Add Sierra filter effect

BuZZ-dEE · BuZZ-dEE · commit aaadfee6553b · 2020-03-14T03:51:53.000+01:00
According to pull request for CSSgram una/CSSgram#204
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
                                         
                                                 
 
-## 34 [Instagram filter effects in SVG][0]
+## 35 [Instagram filter effects in SVG][0]
 
 ### filter ids
 
@@ -45,6 +45,7 @@
 - [ludwig][32]
 - [amaro][33]
 - [sutro][34]
+- [sierra][35]
 
 ### usage
 
@@ -85,3 +86,4 @@ filters are defined in **defs**. see how to use svg defs in html and css.
 [32]: https://codepen.io/BuZZ-dEE/pen/PoqRdZO
 [33]: https://codepen.io/BuZZ-dEE/pen/dyomqZW
 [34]: https://codepen.io/BuZZ-dEE/pen/eYNMLKN
+[35]: https://codepen.io/BuZZ-dEE/pen/NWqYLOJ
diff --git a/fegram.svg b/fegram.svg
@@ -968,6 +968,31 @@
             <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>
+
     </defs>
 
     <defs>
@@ -985,6 +1010,6 @@
                id="imageOriginal" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/> 
     </defs>
 
-    <use xlink:href="#imageOriginal" filter="url(#sutro)" />
+    <use xlink:href="#imageOriginal" filter="url(#sierra)" />
     <use xlink:href="#imageOriginal" y="50%" />
 </svg>
