SVG filter to "flip" the image?
essentially, small tweak that displaces the image to go the opposite way.
kind of
scaleX(-1)
my research so far:
it should be possible, by creating linear gradient and using it as a displacement for the source graphic, it should be able to flip it.
the problem:
converting it properly to be usable with
filter: url(svg) css code
i failed at embedding the feimage linear gradient through it, so i'm currently trying to create my own linear gradient by using gauss blur trickery. feel free to actually figure out how to embed it with the feImage element lol.
ideally try to focus on utf8 formatting, do not encode it to b64, given that the part of it may be tweaked by a css preprocessor.
also, the flipped image does not to maintain the same quality, since i will be applying pretty strong blur on it anyways.
I highly recommend using some useful node based svg filter builders:
currently using self-modded version of:
https://poletaevvlad.github.io/svg-filter-editor/
alt1: svgfm (for me, buggy when working with complex nodes) https://svgfm.chriskirknielsen.com/
alt2: (really good one but the range values are not tweakable and i had to change the slider max and min from devtools when working with it. also, not opensource and a little buggy)
https://svgfilters.com/
once again, feel free to ask any questions and thanks for any help <3SVG Filter Maker
SVGFM, a node graph builder for SVG filters
SVG Filter Builder
Tool to create, inspect and export SVG filters.
4 Replies
normally i wouldn't suggest other servers. But https://frontend.horse/ has a vivid community that is focussed on generative art. Think there might be some people who can help with this
oh i didn't know fehorse has a dc server, mark, thank you so much <3 ill make sure to ask there
definitely getting somewhere!
https://codepen.io/Cubiq/pen/ExJeLKg
here's what i pretty much came up with,
if someone still wants to help, feel free to figure out a way to do this without having to inline it, from my research, I found out that whenever I try to include feImage element in my embedded filter, it simply refuses to show it.
todo:
figure out pure css svg filter solution (no inlined svg from html)
increase the quality (somehow lol)
