How do I create a Vertical Curve UI design?

Question

I'm looking to replicate the vertical curve in the login page that you can see in the picture below.

Login with vertical curve that I want to replicate

I've heard I can do it with SVG's but so far I've only found horizontal SVGs that do this. How do they implement it vertically?

How do they accomplish this?

What have you tried so far? what isn't working as expected? If you already found solutions to it with horizontal svg's, what is preventing you to implement that solution to your case and simply rotate it by 90°? — tacoshy, Aug 24 '22 at 15:03
@tacoshy They are just generators that generate an svg for you, horizontal is very large in the width and not very high and will thus stretch the height and make it very small horizontal wise. The generators also don't tell you the technique about how you implement it. That is ultimately what I'm looking for — gmuylen, Aug 24 '22 at 15:05

score 2 · Answer 1 · answered Aug 24 '22 at 15:20

You can achieve this effect using quadratic curve paths in SVG.

<svg viewBox="100 400" width="100" height="400">
  <path d="M 0 0 H 100 Q 0 100, 50 200 T 50 400 H 0 Z" />
</svg>

This path works like this:

Draws a line to the top right corner: M 0 0 H 100
Draws a curve from that point to the middle (arcing towards the left): Q 0 100, 50 200
Continues the curve to the bottom middle: T 50 400
And finally moves back to the left edge to finish the shape: H 0 Z

Here's a good article for more reading on quadratic curves in SVG: https://www.sitepoint.com/html5-svg-quadratic-curves/

1 Answers1