What are the steps to designing a Vertical Curve UI?

Question

Is there a way to replicate the unique vertical curve on the login page, as shown in the image below?

I've come across horizontal SVGs that can achieve this effect, but I'm struggling to find resources on implementing it vertically. How is this done?

What steps are involved in achieving this vertical curve?

Answer 1

Answer №1

To create a similar effect, quadratic curve paths in SVG can be utilized.

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

The path described above functions as follows:

A line is drawn to the top right corner: M 0 0 H 100
A curve is drawn from that point to the middle (arcing towards the left): Q 0 100, 50 200
The curve continues to the bottom middle: T 50 400
Finally, it returns to the left edge to complete the shape: H 0 Z

For further information on quadratic curves in SVG, check out this insightful article: https://www.sitepoint.com/html5-svg-quadratic-curves/

Answer 2

To create a similar effect, quadratic curve paths in SVG can be utilized.

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

The path described above functions as follows:

A line is drawn to the top right corner: M 0 0 H 100
A curve is drawn from that point to the middle (arcing towards the left): Q 0 100, 50 200
The curve continues to the bottom middle: T 50 400
Finally, it returns to the left edge to complete the shape: H 0 Z

For further information on quadratic curves in SVG, check out this insightful article: https://www.sitepoint.com/html5-svg-quadratic-curves/