I just found this awesome CSS pixel filter and would like to show it to the community. If someone knows other special CSS filter URLs please share it here.
The only downside is that this filter will slow down the website significatly. Is there any work around to make this filter more lightweight?
And is it possible to create a custom CSS filter using
filter: url(); ?
How does it work?
This is the filter effect:
This is the filter code:
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeFlood x='3' y='3' height='2' width='2'/%3E%3CfeComposite width='5' height='5'/%3E%3CfeTile result='a'/%3E%3CfeComposite in='SourceGraphic' in2='a' operator='in'/%3E%3CfeMorphology operator='dilate' radius='3'/%3E%3C/filter%3E%3C/svg%3E#b");