Improved Hefe filter

BuZZ-dEE · BuZZ-dEE · commit 7e1d321eca0f · 2020-03-10T01:59:53.000+01:00
according pull request for CSSGram una/CSSgram#190
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
                                         
                                                 
 
-## 25 [Instagram filter effects in SVG][0]
+## 26 [Instagram filter effects in SVG][0]
 
 ### filter ids
 
@@ -36,6 +36,7 @@
 - [slumber][23]
 - [stinson][24]
 - [valencia][25]
+- [hefe][26]
 
 ### usage
 
@@ -67,3 +68,4 @@ filters are defined in **defs**. see how to use svg defs in html and css.
 [23]: https://codepen.io/BuZZ-dEE/pen/YzXxOJP
 [24]: https://codepen.io/BuZZ-dEE/pen/yLNoxwj
 [25]: https://codepen.io/BuZZ-dEE/pen/WNvEgVX
+[26]: https://codepen.io/BuZZ-dEE/pen/MWwrrOe
diff --git a/fegram.svg b/fegram.svg
@@ -688,10 +688,43 @@
             <feFlood flood-color="#3a0339" flood-opacity=".5"/>
             <feBlend mode="exclusion" in2="cbs"/>
         </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>
     </defs>
 
     <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="imageFiltered" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice" filter="url(#valencia)"/>
+        id="imageFiltered" x="5%" y="5%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice" filter="url(#hefe)"/>
     <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="60%" width="100%" height="50%" preserveAspectRatio="xMidYMid slice"/> 
 </svg>
