Pixelated effect
bdrtsky opened this issue · comments
Hello. I just thought it would be cool to have pixelated effect. How do you think it's possible?
Hmm, its not possible with primitive except u use the triangle mode, but thats not real pixelated.
We are currently working on making SQIP plugin based, so if you find a tool that can create that effect in svg's, we can add it do SQIP.
Maybe there is a svg filter that could do similar?
Heyho @bdrtsky! You could use a preparatory step to convert your high-resolution original into a pixelated variant, e.g. via imagemagick‘s „convert“ + scale and then send that already-pixelated variant as input to SQIP. Primitive mode 2 is „rectangle“ and will be aligned to the pixelated input image if possible, depending on how many shapes you allow. So you can achieve your desired effect - it just needs a prep-step plus a custom mode when running SQIP.
Awesome idea @technopagan :)
@technopagan sounds interesting! I will try that, thanks for idea.
After #35 is done, I'd love to create a plugin that creates real pixelated svgs without using primitive.
Let me know how @technopagan's idea worked out for you @bdrtsky
@bdrtsky check out https://github.com/axe312ger/sqip/tree/feat/pixels-plugin#examples
Is this what you've been looking for? :)
@axe312ger oh yes, this is absolutely awesome 🔥
Thank you!!!
Is there any examples how to use plugins?
UPD: oh, I see huge changes since last time, let me read new release docs first 👍
sqip -p pixels -i yourfile.svg should do it.
A PR to allow setting the number of horizontal pixels would be amazing 😁
There is an SVG filter that can do this. @tigt developed it https://codepen.io/tigt/pen/akYqAg, I've played with it https://codepen.io/eeeps/pen/dqepQm
Warning: it's inefficient and slow. See thread starting here: https://twitter.com/etportis/status/1039892891424837632
I’m pretty sure there’s some way to get the same result without using the same (slow) filter primitives I did, but you might have to ask a DSP engineer to help out with that one. Some likely candidates:
<feDisplacementMap>might be able to do it all on its own<feGaussianBlur>then some sort of<feConvolveMatrix>— the first one is probably fast on today’s GPUs but large matrices in the second can get slow in a real hurry — maybe just a sharpen would work?- You might be able to replace the
<feMorphology>in my pen by using<feTile>to repeat each of the sampled pixels around itself with<feOffset>— but I would be pretty gobsmacked if that was somehow faster.
I am down for any alternative approaches that result in a faster browser rendering time.
A few words why this is currently done with just a bunch of rectangles:
With the current implementation of the pixels plugin I had the idea to write another plugin, which replaces each shape with a given one. That way you could have a matrix of your company logo representing the original image. No idea if that would be really useful but I liked the idea 😅
It is now configurable as well and released in the lastest alpha. Closing here for now.