SVG filter to "flip" the image?
essentially, small tweak that displaces the image to go the opposite way.
kind of
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
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 <3
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)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 <3
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
