| OLD | NEW |
| 1 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> | 1 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> |
| 2 <defs> | 2 <defs> |
| 3 <filter id="colormatrix" color-interpolation-filters="sRGB"> | 3 <filter id="colormatrix" color-interpolation-filters="sRGB"> |
| 4 <feColorMatrix type="hueRotate" values="180"/> | 4 <feColorMatrix type="hueRotate" values="180" x="10" y="10" width="140" hei
ght="70"/> |
| 5 </filter> | 5 </filter> |
| 6 <filter id="morphology" color-interpolation-filters="sRGB"> | 6 <filter id="morphology" color-interpolation-filters="sRGB"> |
| 7 <feMorphology radius="10" operator="dilate"/> | 7 <feMorphology radius="10" operator="dilate" x="10" y="10" width="140" heig
ht="70"/> |
| 8 </filter> | 8 </filter> |
| 9 <filter id="componenttransfer" color-interpolation-filters="sRGB"> | 9 <filter id="componenttransfer" color-interpolation-filters="sRGB"> |
| 10 <feComponentTransfer> | 10 <feComponentTransfer x="10" y="10" width="140" height="70"> |
| 11 <feFuncR type="linear" slope="0.5"> | 11 <feFuncR type="linear" slope="0.5"> |
| 12 <feFuncG type="linear" slope="0.5"> | 12 <feFuncG type="linear" slope="0.5"> |
| 13 <feFuncB type="linear" slope="0.5"> | 13 <feFuncB type="linear" slope="0.5"> |
| 14 <feFuncA type="identity"> | 14 <feFuncA type="identity"> |
| 15 </feComponentTransfer> | 15 </feComponentTransfer> |
| 16 </filter> | 16 </filter> |
| 17 <filter id="blurY" color-interpolation-filters="sRGB"> | 17 <filter id="blurY" color-interpolation-filters="sRGB"> |
| 18 <feGaussianBlur stdDeviation="0 5"/> | 18 <feGaussianBlur stdDeviation="0 10" x="10" y="10" width="140" height="70"/
> |
| 19 </filter> | 19 </filter> |
| 20 <filter id="blend" color-interpolation-filters="sRGB"> | 20 <filter id="blend" color-interpolation-filters="sRGB"> |
| 21 <feGaussianBlur stdDeviation="5 5"/> | 21 <feGaussianBlur stdDeviation="5 5"/> |
| 22 <feBlend in2="SourceGraphic" mode="screen"> | 22 <feBlend in2="SourceGraphic" mode="screen" x="10" y="10" width="140" heigh
t="70"> |
| 23 </filter> | 23 </filter> |
| 24 <filter id="lighting" color-interpolation-filters="sRGB"> | 24 <filter id="lighting" color-interpolation-filters="sRGB"> |
| 25 <feSpecularLighting> | 25 <feSpecularLighting x="10" y="10" width="140" height="70"> |
| 26 <feSpotLight pointsAtX="160" pointsAtY="130" pointsAtZ="0" specularExpon
ent="1" limitingConeAngle="20" x="0" y="0" z="10"/> | 26 <feSpotLight pointsAtX="160" pointsAtY="130" pointsAtZ="0" specularExpon
ent="1" limitingConeAngle="20" x="0" y="0" z="10"/> |
| 27 </feSpecularLighting> | 27 </feSpecularLighting> |
| 28 <feColorMatrix type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0
0 0 1"/> | 28 <feColorMatrix type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0
0 0 1"/> |
| 29 <feBlend in2="SourceGraphic" mode="multiply"/> | |
| 30 </filter> | 29 </filter> |
| 31 <filter id="offset" x="0%" color-interpolation-filters="sRGB"> | 30 <filter id="offset" x="0%" color-interpolation-filters="sRGB"> |
| 32 <feOffset dx="10" dy="10"/> | 31 <feOffset dx="10" dy="10" x="10" y="10" width="140" height="70"/> |
| 33 </filter> | 32 </filter> |
| 34 <filter id="convolvematrix" color-interpolation-filters="sRGB"> | 33 <filter id="convolvematrix" color-interpolation-filters="sRGB"> |
| 35 <feConvolveMatrix order="3 3" kernelMatrix="1 1 1 1 -7 1 1 1 1" bias =
"0.3"/> | 34 <feConvolveMatrix order="3 3" kernelMatrix="1 1 1 1 -7 1 1 1 1" bias =
"0.3" x="10" y="10" width="140" height="70"/> |
| 36 </filter> | 35 </filter> |
| 37 <filter id="displacement" color-interpolation-filters="sRGB"> | 36 <filter id="displacement" color-interpolation-filters="sRGB"> |
| 38 <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G"/> | 37 <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G" x=
"10" y="10" width="140" height="70"/> |
| 39 </filter> | 38 </filter> |
| 40 <filter id="merge" color-interpolation-filters="sRGB"> | 39 <filter id="merge" color-interpolation-filters="sRGB"> |
| 41 <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0
0 0.3 0" result="trans"/> | 40 <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0
0 0.3 0" result="trans"/> |
| 42 <feOffset dx="5" dy="5" in="trans" result="offset1"/> | 41 <feOffset dx="5" dy="5" in="trans" result="offset1"/> |
| 43 <feOffset dx="10" dy="10" in="trans" result="offset2"/> | 42 <feOffset dx="10" dy="10" in="trans" result="offset2"/> |
| 44 <feOffset dx="15" dy="15" in="trans" result="offset3"/> | 43 <feOffset dx="15" dy="15" in="trans" result="offset3"/> |
| 45 <feMerge> | 44 <feMerge x="10" y="10" width="140" height="70"> |
| 46 <feMergeNode in="trans"/> | 45 <feMergeNode in="trans"/> |
| 47 <feMergeNode in="offset1"/> | 46 <feMergeNode in="offset1"/> |
| 48 <feMergeNode in="offset2"/> | 47 <feMergeNode in="offset2"/> |
| 49 <feMergeNode in="offset3"/> | 48 <feMergeNode in="offset3"/> |
| 50 </feMerge> | 49 </feMerge> |
| 51 </filter> | 50 </filter> |
| 52 <filter id="flood" color-interpolation-filters="sRGB"> | 51 <filter id="flood" color-interpolation-filters="sRGB"> |
| 53 <feFlood flood-color="green"/> | 52 <feFlood flood-color="green" x="10" y="10" width="140" height="70"/> |
| 54 </filter> | 53 </filter> |
| 55 <filter id="turbulence" color-interpolation-filters="sRGB"> | 54 <filter id="turbulence" color-interpolation-filters="sRGB"> |
| 56 <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/> | 55 <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" x="10"
y="10" width="140" height="70"/> |
| 57 </filter> | 56 </filter> |
| 58 <filter id="tile"> | 57 <filter id="tile"> |
| 59 <feColorMatrix x="0" y="0" width="40" height="40"/> | 58 <feColorMatrix x="0" y="0" width="40" height="40"/> |
| 60 <feTile x="0" y="0" width="160" height="80"/> | 59 <feTile x="10" y="10" width="140" height="70"/> |
| 61 </filter> | 60 </filter> |
| 62 </defs> | 61 </defs> |
| 63 </svg> | 62 </svg> |
| 64 <style> | 63 <style> |
| 65 img { | 64 img { |
| 66 margin: 10px; | 65 margin: 10px; |
| 67 -webkit-transform: translateZ(0); | 66 -webkit-transform: translateZ(0); |
| 68 } | 67 } |
| 69 </style> | 68 </style> |
| 70 <img src="resources/reference.png"> | |
| 71 <img style="-webkit-filter: url(#colormatrix); filter: url(#colormatrix);" src="
resources/reference.png"> | 69 <img style="-webkit-filter: url(#colormatrix); filter: url(#colormatrix);" src="
resources/reference.png"> |
| 72 <img style="-webkit-filter: url(#morphology); filter: url(#morphology);" src="re
sources/reference.png"> | 70 <img style="-webkit-filter: url(#morphology); filter: url(#morphology);" src="re
sources/reference.png"> |
| 73 <img style="-webkit-filter: url(#componenttransfer); filter: url(#componenttrans
fer);" src="resources/reference.png"> | 71 <img style="-webkit-filter: url(#componenttransfer); filter: url(#componenttrans
fer);" src="resources/reference.png"> |
| 74 <img style="-webkit-filter: url(#blurY); filter: url(#blurY);" src="resources/re
ference.png"> | 72 <img style="-webkit-filter: url(#blurY); filter: url(#blurY);" src="resources/re
ference.png"> |
| 75 <img style="-webkit-filter: url(#blend); filter: url(#blend);" src="resources/re
ference.png"> | 73 <img style="-webkit-filter: url(#blend); filter: url(#blend);" src="resources/re
ference.png"> |
| 76 <img style="-webkit-filter: url(#lighting); filter: url(#lighting);" src="resour
ces/reference.png"> | 74 <img style="-webkit-filter: url(#lighting); filter: url(#lighting);" src="resour
ces/reference.png"> |
| 77 <img style="-webkit-filter: url(#offset); filter: url(#offset);" src="resources/
reference.png"> | 75 <img style="-webkit-filter: url(#offset); filter: url(#offset);" src="resources/
reference.png"> |
| 78 <img style="-webkit-filter: url(#convolvematrix); filter: url(#convolvematrix);"
src="resources/reference.png"> | 76 <img style="-webkit-filter: url(#convolvematrix); filter: url(#convolvematrix);"
src="resources/reference.png"> |
| 79 <img style="-webkit-filter: url(#displacement); filter: url(#displacement);" src
="resources/reference.png"> | 77 <img style="-webkit-filter: url(#displacement); filter: url(#displacement);" src
="resources/reference.png"> |
| 80 <img style="-webkit-filter: url(#merge); filter: url(#merge);" src="resources/re
ference.png"> | 78 <img style="-webkit-filter: url(#merge); filter: url(#merge);" src="resources/re
ference.png"> |
| 81 <img style="-webkit-filter: url(#flood); filter: url(#flood);" src="resources/re
ference.png"> | 79 <img style="-webkit-filter: url(#flood); filter: url(#flood);" src="resources/re
ference.png"> |
| 82 <img style="-webkit-filter: url(#turbulence); filter: url(#turbulence);" src="re
sources/reference.png"> | 80 <img style="-webkit-filter: url(#turbulence); filter: url(#turbulence);" src="re
sources/reference.png"> |
| 83 <img style="-webkit-filter: url(#tile); filter: url(#tile);" src="resources/refe
rence.png"> | 81 <img style="-webkit-filter: url(#tile); filter: url(#tile);" src="resources/refe
rence.png"> |
| OLD | NEW |