Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

gradients.venki.dev

Post reply on HN
Print view View original

1–10 of 10 posts

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

#2

Post by venkii »

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/

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

#3

Post by Stevemiller07 »

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.

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

#4

Post by beeman »

venkii wrote: post #2

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 enginee…

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

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

#5

Post by tomaspollak »

venkii wrote: post #2

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 enginee…

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

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

#7

Post by venkii »

beeman wrote: post #4
venkii wrote: post #2

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 enginee…

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

Done - thanks :)

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

#8

Post by venkii »

NoelJacob wrote: post #6

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...

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

#9

Post by venkii »

tomaspollak wrote: post #5
venkii wrote: post #2

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 enginee…

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.
Post reply on HN