One side rounded rectangle using SVG
Baby proofing 👶 your charts with rounded corners ❤️
It is pretty easy to draw a rectangle with rounded corners specifying a border radius rx
or ry
.
However, this does not help us much in drawing one side only rounded rectangle. One approach is to draw this using path
.
🔆 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
What’s happening here?
Mx,y
Move the pen to(10, 40)
h<length>
Draw a horizontal line of length50px
qx1,y1 x,y
Draw a quadratic bezier curve tox, y
via a control point stationed atx1, y1
. We are drawing a curve to (5, 5) from where we are now via (5, 0)
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?