[App Idea] Tool to generate abstract color background images

[Gummibeer]

Project URL

https://webwide.io/threads/my-recent-design-works.957/

Elevator Pitch

A tool where I can enter `2` to `n` colors (n can be limited) and possibly also pick something like a style, direction and retrieve one of these cool randomized images.

Thee idea is based on: My recent design works by @ReinissB

A tool where I can enter 2 to n colors (n can be limited) and possibly also pick something like a style, direction and retrieve one of these cool randomized images. In best case I get a new image every run. Or it even generates n images at once.
If I like one I can download it - possibly even in different types, SVG (if possible), high-res BMP, PNG and JPG.

From my perspective the technique behind would be something like this:

• solid background with defined background color
• generate some (amount possibly adjustable) random geometries which should be rounded and get a big blurred outer
• put everything together

 

[adam]

Did you have a build in mind? Quite fancy trying this in a little CodePen. 😄

 

[Gummibeer]

Did you have a build in mind? Quite fancy trying this in a little CodePen. 😄

Do you mean tech stack? I think that it should work as a web app. I would say that Zeit/Vercel unlimited function calls would be a perfect platform for this. And I also believe that it should be possible in node.js.

For me the trickiest part would be generating the different geometries that it still looks good. Potentially it could also work with a large stack of predefined layers. 🤔

 

[adam]

I was just wondering if you had planned to built so I don't copy from you! I was wondering if it could be done in nothing but SVG/CSS with some vanilla JS to configure.

 

[Gummibeer]

I was just wondering if you had planned to built so I don't copy from you! I was wondering if it could be done in nothing but SVG/CSS with some vanilla JS to configure.

This would be my dream. 😅 And because SVG and CSS are much more powerful than most think it could be. Right now I don't have any plans. That's why I've labeled it as App idea. 😉

 

[Gummibeer]

@Sharkie could possibly help with CSS gradients. 😅

 

[Sharkie]

@Sharkie could possibly help with CSS gradients. 😅

HECK YEAH let me know what I can help with, this is a super neat idea.

 

[kilian]

Here's how I would do it (in canvas)

• gradient background
• generate complex random blobs like https://blobs.app/ and randomly place them on the canvas, either solid colors or subtle gradient based on the chosen colors
• use something like multiply to make the colors more vibrant
• blur the edges of each blob

 

[Gummibeer]

Here's how I would do it (in canvas)

• gradient background
• generate complex random blobs like https://blobs.app/ and randomly place them on the canvas, either solid colors or subtle gradient based on the chosen colors
• use something like multiply to make the colors more vibrant
• blur the edges of each blob

Exactly THIS! 🚀🎉🎈

 

[adam]

Wondering if something could be done with a more viscous and less turbulent fluid simulation like https://paveldogreat.github.io/WebGL-Fluid-Simulation/

 

[tom]

Just saw this one here on reddit, thought it might be worth sharing: https://www.reddit.com/r/webdev/comments/h9xgly

 

[Gummibeer]

Just saw this one here on reddit, thought it might be worth sharing: https://www.reddit.com/r/webdev/comments/h9xgly

The radial-gradient() example looks promising. 😮