Show HN: Generate random gradients like on OpenAI's website | Hacker News Reader

Show HN: Generate random gradients like on OpenAI's website

gradients.venki.dev

33 pointsvenkii9 comments

Hey HN!

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/

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? :)

Thanks! I'll look into adding custom palettes & the heightmap method. Might not get to it tbh - but I'll take a look.

Looks awesome! It would be good to add a license to your repo!

Done - thanks :)

I think Noise will make it better.

This is great but I wish CSS output was generated. Anything that can do that?

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.

[1] https://github.com/venkr/gradient-gen/blob/main/src/EllipseG...

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.

Reply on news.ycombinator.com