Check out this fun tool I built to make cover images for my blog. The main goal: interesting looking random gradients, that all draw from a single color palette.
I stumbled upon this post from Justin Jay Wang [1], who designed for OpenAI - describing methods for random gradients, including the one that shipped on OpenAI’s homepage from 2020-2022.
Since the post included ~10 SVGs, I was able to reverse engineer the SVG parameters, and decided to put up a generator. You can see the exact deets in my Github README [2].
I also use it to generate cover images for my Substack [3] - if you want to see what using a bunch of images generated by it looks like.
Great work! Maybe you can add an option to use the 'heightmap' method described by Justin in his blog post. And maybe let users add their own palettes? :)
venkii · 1d ago
Thanks!
I'll look into adding custom palettes & the heightmap method. Might not get to it tbh - but I'll take a look.
beeman · 1d ago
Looks awesome! It would be good to add a license to your repo!
venkii · 1d ago
Done - thanks :)
soocil5 · 13h ago
I think Noise will make it better.
NoelJacob · 1d ago
This is great but I wish CSS output was generated. Anything that can do that?
venkii · 1d ago
Mmm interesting.
I'm not sure if it's possible in pure CSS, maybe it is? It relies on creating new SVG elements.
I think including the SVG in whatever website would usually be the simplest way to use it and it's super lightweight.
Feel free to take a look at the SVG generation function here [1] and lmk if you have any ideas to make it happen in pure CSS.
Nice work. Gradients can add a dynamic feel without distracting users, and OpenAI’s subtle animated style is a good example. A generator like this makes it easy to experiment with color palettes and get consistent, visually pleasing results quickly.
Check out this fun tool I built to make cover images for my blog. The main goal: interesting looking random gradients, that all draw from a single color palette.
I stumbled upon this post from Justin Jay Wang [1], who designed for OpenAI - describing methods for random gradients, including the one that shipped on OpenAI’s homepage from 2020-2022.
Since the post included ~10 SVGs, I was able to reverse engineer the SVG parameters, and decided to put up a generator. You can see the exact deets in my Github README [2].
I also use it to generate cover images for my Substack [3] - if you want to see what using a bunch of images generated by it looks like.
[1] https://justinjay.wang/methods-for-random-gradients/
[2] https://github.com/venkr/gradient-gen
[3] https://venkii.substack.com/
I'm not sure if it's possible in pure CSS, maybe it is? It relies on creating new SVG elements.
I think including the SVG in whatever website would usually be the simplest way to use it and it's super lightweight.
Feel free to take a look at the SVG generation function here [1] and lmk if you have any ideas to make it happen in pure CSS.
[1] https://github.com/venkr/gradient-gen/blob/main/src/EllipseG...