[HN Gopher] Pixelating Live with SVG
___________________________________________________________________
Pixelating Live with SVG
Author : surprisetalk
Score : 50 points
Date : 2023-12-24 11:07 UTC (11 hours ago)
(HTM) web link (meyerweb.com)
(TXT) w3m dump (meyerweb.com)
| tetris11 wrote:
| I quite like the idea, I just don't understand why SVG to render
| the pixel output. Why not canvas, or another progammable raster
| container?
|
| As for SVG itself, I think it needs a new primitive shape for
| holding a pixel field. I've seen too many point plots saved to
| SVG that take a million years to render.
| speps wrote:
| SVG can contain images, including data URL ones, what's
| missing?
| tetris11 wrote:
| You're right of course, it just feels like a waste of the
| spec to use it only to embed raster.
|
| Is there no gradient style that could be used to encode
| pixels, directly using the schema?
| simbolit wrote:
| What do you mean by "waste of the spec"?
| tetris11 wrote:
| Its a vector graphic spec with support for raster
| embeddings. Using it to hold primarily raster data feels
| like an underutilisation of the vector capabilities.
|
| A PNG would have been better, but a PNG is not
| programmable, so I lamented the SVG spec not having a
| programmable bitmap, since lots of people use it for
| plotting data.
| solardev wrote:
| That seems like it would be a lot of duplication of
| effort. A vector format that also has its own raster
| codec (and having to deal with compression, different
| metadata, etc?). Seems like the worst of both worlds, vs
| just using Canvas to output programmable rasters.
| Different implementations/browsers already have enough
| trouble outputting SVG as it is, making it even more
| complex/powerful would be counterproductive, I think...
|
| There are also specialist tools for dealing with web
| raster layers, like in GIS:
| https://openlayers.org/en/latest/examples/raster.html
|
| This just shouldn't be a job for SVG, IMO.
| pseudosavant wrote:
| You can use SVG filters in CSS to apply to any element or even
| the whole page. Check out this demo page I have for trying SVG
| filters on a video. https://svg-video-filters.glitch.me/
| Jakob wrote:
| You could exchange the font with one that has the illegible
| blocks you want as letters? There are web sites that help with
| creating such a font.
| Flam wrote:
| Maybe screenshot + canvas with pointer-events none to fake live.
| Since it would be a perfect overlay no one should be able to tell
| the difference
| wewxjfq wrote:
| You could downscale the screenshot and use an `<img>` with
| `image-rendering: pixelated` to display it.
| rikroots wrote:
| 'Kay, I don't know if this comes anywhere close to what the OP
| wants, but this sort of live browser tab manipulation is possible
| to do using a mix of a a canvas element and the browser's Screen
| Capture API[1] (plus my JS canvas library, once I merge and
| publish the required changes into its next release[2]).
|
| This solution[3] shows the modified browser tab in a separate
| browser tab. I've got no idea whether it's possible to do the
| same sort of trick in the same tab (but probably not). I also
| have no idea how secure the Screen Capture API is - I'd get very
| nervous about doing this sort of thing when looking at my bank's
| online portal!
|
| [1] https://developer.mozilla.org/en-
| US/docs/Web/API/Screen_Capt...
|
| [2] https://github.com/KaliedaRik/Scrawl-canvas/pull/57
|
| [3] Youtube video of the effect:
| https://www.youtube.com/watch?v=hCi6LmKMAo0
| StrLght wrote:
| Looks amazing, love it.
|
| Unfortunately, the Codepen doesn't work on Safari (iOS and macOS
| both), and from my perspective that's absolutely expected when
| dealing with SVGs: standard is wild, you never know how exactly
| it's going to be rendered.
| crazygringo wrote:
| > _I'm aware I could take raster screenshots of pages and then
| manipulate them in an image editor. I don't want to do that,
| though -- I want to pixelate live. For reasons._
|
| I'm totally unclear what the author means by "live".
|
| Is it OK to take a static screenshot and pixelate it as long as
| it's all inside of the browser tab, rather than pasted into an
| image editor?
|
| Or do they want to be able to be able to select text, have a
| blinking cursor, type in text fields, etc. and have all that
| happen behind the pixelation filter?
| pseudosavant wrote:
| You can use SVG filters in CSS to apply to any element or even
| the whole page. Check out this demo page I have for trying SVG
| filters on a video. https://svg-video-filters.glitch.me/
| xivusr wrote:
| Because they won't say _why_ I'm curious. My (naive) guess is
| some type of dynamic paywall generation. Interesting problem and
| solution either way and love seeing a clever use for SVG's.
| pseudosavant wrote:
| It seemed to me more like he was trying to avoid people
| bikeshedding his use case and just wanted a solution.
| dahart wrote:
| Not sure why they're reaching for SVG, but I don't think there's
| a built-in solution. This would be fairly simple to do by
| rendering to a canvas, and then doing the pixelation in
| JavaScript (or maybe WebGL). This would be expensive and won't be
| super performant, so best as a one-time thing on static content,
| not something you want to do on top of an animated page.
| pseudosavant wrote:
| They are using SVG because SVG filters can be used in CSS too.
| You can even apply filters to real-time video playback. I have
| a video player project where I've worked on adding filters for
| black and white, retro, etc.
|
| You can apply them to any element or even the entire page.
|
| https://developer.mozilla.org/en-US/docs/Web/CSS/filter#synt...
| pseudosavant wrote:
| Here is a demo page I had for trying out filters to show the
| effect: https://svg-video-filters.glitch.me/
| dahart wrote:
| Nice, the morph filter is tantalizingly close to what the
| poster is looking for. (I'm sure you know already, but
| unfortunately that page doesn't work on iOS.) Maybe there's
| a 'nearest neighbor' or 'box filter' blur in SVG, but I'm
| not aware of one. I googled and see other people looking
| for the same effect and resorting to canvas and hand-
| crafted image processing. It might be doable and reasonably
| performant with a WebGL shader.
| dsmmcken wrote:
| Here's the closest I could come up with:
| https://codepen.io/dsmmcken/pen/rNRaOJE
|
| It does a subtle blur, then a subtle sharpen, then repeats the
| middle pixel of a 3x3 grid. Happy holidays!
|
| Doesn't work on mobile, probably needs some pixel scaling math.
| pseudosavant wrote:
| I played around with this for at least an hour. Countless rounds
| back and for with ChatGPT on SVG. I'm no closer to something
| better than the examples in the StackOverflow thread. I hope he
| figures it out though.
___________________________________________________________________
(page generated 2023-12-24 23:01 UTC)