Post

I'm currently experimenting with CSS and SVG filter effects. This one is based on the "Grainy Gradients" tutorial: css-tricks.com/grainy-gradi... The goal is to get a print-dithering like effect. I also added a few more color splots to make it even more organic. #generative #generativeart #css

bleeptrack

@bleeptrack.de

The base is a SVG file defining the noise. This one is created with two feTurbulence tags. It gets then applied as the background of the shape.

27/10/26, 7:50 am0 reposts2 likes

bleeptrack

@bleeptrack.de

Additionally to the noise background we also want to have a gradient.

bleeptrack

@bleeptrack.de

Now it gets interesting: if we crank up contrast and brightness, we get a small grainy gradient from our noise!

bleeptrack

@bleeptrack.de

To get rid of the right part we can just use a better blending mode like multiply. Also if we let the gradient run from 0.4 to 0.7 instead of from 0 to 1 we can stretch the gradient area to the whole shape if we want that.

bleeptrack

@bleeptrack.de

Problem now is that the contrast and brightness screws with our color if we wanted to have a certain hex value. So far I fix that with a SVG filter, but I find this rater suboptimal. Not sure if there is a nicer way? (and yeah, its called tint-orange but currently tints blue :D)