One side rounded rectangle using SVG

Baby proofing 👶 your charts with rounded corners ❤️

A horizontal column chart

It is pretty easy to draw a rectangle with rounded corners specifying a border radius rx or ry.

View source

Rounded rectangle

However, this does not help us much in drawing one side only rounded rectangle. One approach is to draw this using path.

Photo by Jana Sabeth Schultz on Unsplash

🔆 Paving the path

📖 Basics

The SVG coordinate system starts from the top left corner. In the path syntax, small letters denote relative coordinates. Eg: h50 means draw a horizontal line of length 50px from where you are now.

✍🏻 Code

View source

What’s happening here?

1. Mx,y Move the pen to(10, 40)
2. h<length> Draw a horizontal line of length 50px
3. qx1,y1 x,y Draw a quadratic bezier curve to x, y via a control point stationed at x1, y1. We are drawing a curve to (5, 5) from where we are now via (5, 0)

Quadratic bezier curve explained

4. v<length> Draw a vertical line 10px down

5. qx1,y1 x,y Same as in Step 3. We are drawing a curve to (-5, 5) from where we are now via a control point stationed at (0, 5)

6. h<length> Draw a horizontal line backward 50px

7. z Close the curve

Rounded corners are beautiful 🌈. What are you going to build with this?

References

1. SVG path syntax illustrated guide
2. stack overflow