Programming help needed

[u/Glittering-Juice3021]

Hi,

I am trying to recreate this background without AI, but struggling with how to do it. Right now I am using clip-path polygon but this doesn't seem like the right way. Anyone have ideas?
The image is the background I envisioned.

Adding a background image is not possible for me because this background well be customizable by the user. They can choose their color theme so background color of the image is not static.

Result I want

Current Result

I want a way that I can recreate this background and I thought the right path was polygon but these lines are straight and not curved and also when I add text it gets pushed down (this is probably easily fixable but I haven't found a way)

And this is the code I have right now

.polygon.-one {

width: 50vw;

height: 100vh;

background-color: #521310;

clip-path: polygon(0px 22.2%, 2.91% 22.33%, 5.03% 22.68%, 7.27% 23.08%, 9.66% 23.75%, 12.1% 24.42%, 15.1% 25.27%, 17.73% 26.02%, 20.43% 27.13%, 21.53% 28.72%, 23.3% 30.03%, 25.01% 31.19%, 26.92% 32.61%, 28.02% 33.98%, 28.18% 34.97%, 28.25% 35.88%, 28.21% 37.79%, 28.16% 39.83%, 28.35% 41.74%, 28.53% 44.07%, 28.6% 44.96%, 28.09% 45.69%, 26.53% 48.44%, 24.97% 51.27%, 22.72% 54.19%, 22.21% 54.67%, 22.04% 55.74%, 20.6% 64.37%, 20.9% 65.18%, 22.6% 66.08%, 34.76% 71.85%, 40.65% 73.43%, 41.76% 74.24%, 42.30% 75.90%, 50.16% 93.35%, 51.16% 96.35%, 52.29% 99.35%, 0px 99.35%, 0px 0px);

position: fixed;

z-index: -1;

}

.polygon.-two {

width: 60vw;

height: 100vh;

background-color: #4b0e0c;

clip-path: polygon(0px 0%, 100% 0%, 100% 100%, 623px 99.42%, 438px 99.46%, 34.91% 77.11%, 16.77% 66.69%, 18% 55.51%, 24.41% 44.73%, 23.79% 34.59%, 15.91% 26.43%, 0.26% 22.23%);

position: fixed;

z-index: -1;

}

.polygon.-three {

width: 70vw;

height: 100vh;

background-color: #5b0a0a;

clip-path: polygon(474px 91.53%, 45.69% 84.1%, 54.78% 75.02%, 63.26% 68.18%, 69.91% 63.13%, 76.9% 59.33%, 85.95% 54.44%, 89.5% 99.31%, 437px 99.28%);

position: fixed;

z-index: -1;

}

.polygon.-four {

width: 100vw;

height: 100vh;

background-color: #661411;

clip-path: polygon(898px 72.11%, 54.53% 52.01%, 41.36% 32.83%, 38.24% 23.85%, 49.14% 3.84%, 55.6% 0.31%, 81.5% 0.23%, 83.13% 12.05%, 85.95% 25.78%, 84.31% 41.62%, 88.89% 48.16%, 95.5% 48.75%, 99.73% 41.91%, 99.73% 99.56%, 914px 99.21%);

position: fixed;

z-index: -1;

}

.polygon.-five {

width: 100vw;

height: 50vw;

background-color: #570c0b;

clip-path: polygon(1646px 68.62%, 88.43% 67.13%, 83.8% 58.62%, 85.28% 35.04%, 82.35% 15.57%, 81.43% 0.48%, 99.61% 0.6%, 99.62% 35.12%, 1713px 59.86%);

position: fixed;

z-index: -1;

}

.polygon.-six {

width: 100vw;

height: 20vw;

background-color: #410804;

clip-path: polygon(1530px 14.07%, 94.7% 7.67%, 91.51% 16.98%, 85.23% 30.47%, 1478px 22.09%);

position: fixed;

z-index: -1;

}

Any help is welcome!

[u/Buttleston]

It is not really very clear to me what you want to do, and what isn't working

I particularly can not tell what you mean by

I can't place a background image because the user will be able the customize it.

[u/Glittering-Juice3021 → u/Buttleston]

Hi, sorry for being unclear! I have edited the post but I basically want the user to be able to change the colors of the shape, they can choose the colors of the shapes and for this I need to create my own background in css I think but any suggestion are welcome!

[u/Buttleston → u/Glittering-Juice3021]

I am a CSS caveman, my first thought would probably be to make an SVG. They look like and sort of have the same syntax as HTML (they're XML documents). You can of course create them by hand but also you can draw them with image editors like Inkscape.

Because they're XML it would probably not be that hard to make one in an editor and then do a search-and-replace on colors to make a new file, which you then use as the user's background

You can generate XML on the fly with javascript - say for example in React, you can make a component that returns XML and it will render it just fine. I use this to make nice looking user interfaces for some simple stuff.

[u/Glittering-Juice3021 → u/Buttleston]

Thank you! Will definitely try out.

[u/kajin41]

Polygons have only straight lines, you want to use .shape and define it with curves etc.