The article “How to Create Complex Paths in SVGs” examined the <path> element and showed how to draw a series of lines and arcs to create any shape. (It’s often used to replicate fonts without requiring a full font download.)
The d attribute offers a couple of extra tricks to draw smooth curves. In this article, we’ll discuss cubic Bézier curves, but you can also refer to “How to Draw Quadratic Bézier Curves on SVG Images” for a slightly simpler option.
What are Cubic Bézier Curves?
You’ve possibly encountered cubic Bézier curves in desktop publishing and graphics packages. They define a start point (P0) and end point (P3). However, while quadratic curves use one control point, cubic Bézier curves have two: one for each end of the line (P1 and P2). Wikipedia’s Bézier curve page provides a good generation illustration:
Image source
The terrifying equations can also be examined at WolframMathWorld.
Cubic Bézier curves provide further possibilities. The two control points can generate curves which reverse direction or wrap around on themselves.
Continue reading How to Draw Cubic Bézier Curves on HTML5 SVGs on SitePoint.
