3 ms·

I like the trick of rendering in a small resolution and then scaling it back up without anti-aliasing and stuff. I wonder if there's any way to do chunky pixel

I like the trick of rendering in a small resolution and then scaling it back up without anti-aliasing and stuff. I wonder if there's any way to do chunky pixel static websites like that just using CSS in the same way?

JKCalhoun 2y ago
Yeah, not sure. Rendering first to an HTML5 Canvas, but how to render CSS, etc. to a Canvas is beyond me. Maybe just a lot of custom CSS/HTML to give the appearance: https://www.vcfmw.org https://www.vcfmw.org
- rikroots 2y ago
  The terrible, very cheaty way to do it is to screen capture a website from a browser tab, and display it in another browser tab inside a canvas element with some form of pixelize filter applied. https://scrawl-v8.rikweb.org.uk/demo/dom-019.html https://scrawl-v8.rikweb.org.uk/demo/dom-019.html
jdiff 2y ago
Short answer: Not really. Long answer: Sorta, with a lot of overbearing caveats. Normal HTML elements cannot be rendered this way, there's no way to disable AA when drawing and no way to disable bilinear (or similar) filtering when scaling. Things will lose resolution, but they'll blur rather than chunk. Image elements and canvases CAN be scaled to preserve pixels. Anything you draw to a canvas can be kept chunky, but you'll be writing your own rendering routines because the browser does not know how to lay off the AA. There's probably some treachery you can pull off through SVG.
- zamadatix 2y ago
  Example of some SVG treachery (getting an exact retro style this way would be difficult to say the least) https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0 https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0
  - jdiff 2y ago
    Heads up, Firefox doesn't like SVG filters being applied to the root element, but the body element works just fine. Pretty impressive effect, seems tricky to tame though. Where's this gingham pattern bubble up from?

JKCalhoun 2y ago

Yeah, not sure. Rendering first to an HTML5 Canvas, but how to render CSS, etc. to a Canvas is beyond me. Maybe just a lot of custom CSS/HTML to give the appearance: https://www.vcfmw.org https://www.vcfmw.org

rikroots 2y ago
The terrible, very cheaty way to do it is to screen capture a website from a browser tab, and display it in another browser tab inside a canvas element with some form of pixelize filter applied. https://scrawl-v8.rikweb.org.uk/demo/dom-019.html https://scrawl-v8.rikweb.org.uk/demo/dom-019.html

jdiff 2y ago

Short answer: Not really. Long answer: Sorta, with a lot of overbearing caveats. Normal HTML elements cannot be rendered this way, there's no way to disable AA when drawing and no way to disable bilinear (or similar) filtering when scaling. Things will lose resolution, but they'll blur rather than chunk. Image elements and canvases CAN be scaled to preserve pixels. Anything you draw to a canvas can be kept chunky, but you'll be writing your own rendering routines because the browser does not know how to lay off the AA. There's probably some treachery you can pull off through SVG.

zamadatix 2y ago
Example of some SVG treachery (getting an exact retro style this way would be difficult to say the least) https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0 https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0
- jdiff 2y ago
  Heads up, Firefox doesn't like SVG filters being applied to the root element, but the body element works just fine. Pretty impressive effect, seems tricky to tame though. Where's this gingham pattern bubble up from?