[App Idea] Tool to generate abstract color background images

Gummibeer

Astroneer
Moderator
Local time
11:25
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him
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

 
Upvote 1

Adam

Mr. Webwide
Administrator
Local time
10:25
Joined
Sep 24, 2019
Messages
1,257
Pronouns
he/him

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

 

Gummibeer

Astroneer
Moderator
Local time
11:25
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

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

Mr. Webwide
Administrator
Local time
10:25
Joined
Sep 24, 2019
Messages
1,257
Pronouns
he/him

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.

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
11:25
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

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

 

kilian

Member
Gold Member
Local time
11:25
Joined
Oct 7, 2019
Messages
62
Pronouns
he/him

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

Astroneer
Moderator
Local time
11:25
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

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! 🚀🎉🎈

 
Top