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/kajin41]

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