4 ms·

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

33 points by venkii 1y ago

venkii 1y ago
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/ https://justinjay.wang/methods-for-random-gradients/ [2] https://github.com/venkr/gradient-gen https://github.com/venkr/gradient-gen [3] https://venkii.substack.com/ https://venkii.substack.com/
- beeman 1y ago
  Looks awesome! It would be good to add a license to your repo!
  - venkii 1y ago
    Done - thanks :)
- tomaspollak 1y ago
  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 1y ago
    Thanks! I'll look into adding custom palettes & the heightmap method. Might not get to it tbh - but I'll take a look.
Stevemiller07 1y ago
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.
NoelJacob 1y ago
This is great but I wish CSS output was generated. Anything that can do that?
- venkii 1y 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. [1] https://github.com/venkr/gradient-gen/blob/main/src/EllipseGenerator.tsx https://github.com/venkr/gradient-gen/blob/main/src/EllipseG...
soocil5 1y ago
I think Noise will make it better.

33 points by venkii 1y ago

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/ https://justinjay.wang/methods-for-random-gradients/ [2] https://github.com/venkr/gradient-gen https://github.com/venkr/gradient-gen [3] https://venkii.substack.com/ https://venkii.substack.com/

beeman 1y ago
Looks awesome! It would be good to add a license to your repo!
- venkii 1y ago
  Done - thanks :)
tomaspollak 1y ago
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 1y ago
  Thanks! I'll look into adding custom palettes & the heightmap method. Might not get to it tbh - but I'll take a look.

Stevemiller07 1y ago

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.

NoelJacob 1y ago

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

venkii 1y 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. [1] https://github.com/venkr/gradient-gen/blob/main/src/EllipseGenerator.tsx https://github.com/venkr/gradient-gen/blob/main/src/EllipseG...

soocil5 1y ago

I think Noise will make it better.