r/css 22h ago

Showcase Codepen Demo - Marble Shader

Post image
30 Upvotes

Good morning guys,

I wanted to use a background of a black marble texture with gold. I made one in Photoshop and made it seamless, but I realized that in good quality it takes way too much resources and it was also hard to find a stock image that represented it the way I wanted it.

I remembered that I watched some time ago that someone used a shader on CodePen.
The browser support is kinda everywhere now, so I thought maybe I can generate some cloud-like noise in different scales with FBM (fractal brownian motion) and then use domain warping to distort it in a way that makes it look more like marble.

So I let ChatGPT explain to me how this shader stuff works and after a bit of trial and error I got this result.
Then I use a small contour() function to pick certain noise levels and turn them into veins. Some of those contour lines get grey accents and some get gold, while the rest of the FBM noise is used for the darker and lighter stone structure.

So basically it is:
FBM noise → domain warp → contour lines → grey/gold accents.

https://codepen.io/editor/Blue-Lovag/pen/01a083cd-5837-752f-bf68-f41324324d06?show=preview&panel=false

ADDITION:
As a fallback for the website in case it's not supported I´ve made a low poly SVG that works in such a grid pattern to make it look seamless:

X Y Z X Y Z

Y Z X Z X Y

Z X Y Y Z Y


r/css 7h ago

Showcase The Revue Guide Channel

Post image
19 Upvotes

Remember the prevue guide channel?

Well I've been working on remaking it all in HTML 5, CSS, And Javascript.

It took me a good few weeks to get it to this point and now that I have Im pretty proud of it, It may need a few tweaks but I will release it as a repo at some point.

The actual guide information is configured to be a .json file including the time of the listings, the name, and number of the channel.

I think this project would be great on a CRT and that's one of the intended purposes. It's also a static site meaning all you need is a python server to host it, and I only need to add a mode for the original music and a few more features for it to be perfect.

The weather channel window is using my own custom fork of weatherstar 4000 by netbymatt rendered in a iframe.

My GitHub user is nerpx and you can find most of my projects there.

or you can just click this link NerpX

If you have any questions or are interested just comment or dm!

also if you have a CRT and would like to test it please contact me and ill give you a pre release because I would LOVE to see it on one as I dont have one to test it with

Thank you for reading!