How could I recreate something like this?

5 Replies

vince•6mo ago

First try to do the layout of the hero and then put that in a codepen. It'll show you made progress + put effort into it, and it'll help others help you 🙂 But off the top of my head I don't know -- usually you can look at devtools (f12 or right click > inspect element) and see how they set things up

vince•6mo ago

Seems like they set this up with a canvas, but I'm not sure what they did exactly as I've never worked with the canvas API. Might be in the Network tab under a javascript file

Jochem•6mo ago

the canvas isn't for the basic shape, that's a really complicated overlayed radial gradient:

background: radial-gradient(var(--gradientColorThree) 23%,var(--gradientColorThreeTransparent) 67% 100%) 385px -24px,radial-gradient(var(--gradientColorOne) 0,var(--gradientColorOneTransparent) 60% 100%) -940px 290px,radial-gradient(var(--gradientColorTwo) 10%,var(--gradientColorTwoTransparent) 60% 100%) -120px 250px,radial-gradient(var(--gradientColorOne) 40%,var(--gradientColorOneTransparent) 57% 100%) 495px -44px,radial-gradient(var(--gradientColorZero) 30%,var(--gradientColorZeroTransparent) 67% 100%) 122px -120px,radial-gradient(var(--gradientColorZero) 10%,var(--gradientColorZeroTransparent) 60% 100%) -420px 120px,radial-gradient(var(--gradientColorTwo) 15%,var(--gradientColorTwoTransparent) 50% 100%) -620px 0,radial-gradient(var(--gradientColorTwo) 25%,var(--gradientColorTwoTransparent) 50% 100%) 520px -250px,var(--gradientColorZero);

background: radial-gradient(var(--gradientColorThree) 23%,var(--gradientColorThreeTransparent) 67% 100%) 385px -24px,radial-gradient(var(--gradientColorOne) 0,var(--gradientColorOneTransparent) 60% 100%) -940px 290px,radial-gradient(var(--gradientColorTwo) 10%,var(--gradientColorTwoTransparent) 60% 100%) -120px 250px,radial-gradient(var(--gradientColorOne) 40%,var(--gradientColorOneTransparent) 57% 100%) 495px -44px,radial-gradient(var(--gradientColorZero) 30%,var(--gradientColorZeroTransparent) 67% 100%) 122px -120px,radial-gradient(var(--gradientColorZero) 10%,var(--gradientColorZeroTransparent) 60% 100%) -420px 120px,radial-gradient(var(--gradientColorTwo) 15%,var(--gradientColorTwoTransparent) 50% 100%) -620px 0,radial-gradient(var(--gradientColorTwo) 25%,var(--gradientColorTwoTransparent) 50% 100%) 520px -250px,var(--gradientColorZero);

and a skew!

transform-origin: var(--transformOriginX) 100%;
  transform: skewY(var(--gradientAngle));

transform-origin: var(--transformOriginX) 100%;
  transform: skewY(var(--gradientAngle));

right?! I'd personally probably use a clip-path

vince•6mo ago

If I were you I wouldn't focus on trying to understand all that but try to make the general shape of it and maybe some "close enough" gradient for it You're just trying to practice so don't get hung up on the super specifics of it (unless you want to)

Jochem•6mo ago

yeah, 100%. I doubt that gradient is handwritten anyway

Gaming

Programming

How could I recreate something like this?