Retro CRT curved screen effect for website/ccs

Question

OK, so this is NOT a self-promotion!!

I currently have an cyberpunk website that is running phpbb forum, which is using the default prosilver theme, on top of that theme I have another theme/skin called 1978 it gives the website that old school green terminal look. What I would like to do, is create that curved look like the old monitors. I have cool-retro-term which I used as an example of the effect I'm looking for. (see pic) not the lines or flicker just the curved look cause what I'm wanting is for people to be able to hit F11 which goes full screen on the browser and it would look like they are using the website on a old monitor.

I assumed I would setup a div around the entire body or after and give it a class then call some css maybe some java <-- like I have any idea how that would work..lol what I'm looking for is a starting place? I've found some stuff on codepen but it's not quite what I'm looking for.

Any ideas??

Answer 1

It can be done with SVG filters, the problem is that every time you resize the page, the svg parameters must be changed. Did a demo here. Still documenting and cleaning it for Github.

https://frindestown.duckdns.org/videomator.html

Here is the stable site, the other comes and goes. https://chafalleiro.github.io/retromator/videomator.html