Teaching Quadratic Curves

This is a series of line segments demonstrating how the quadratic curve control point influences the SVG path. This is a series of 4 line drawings in a 2x2 formation, a wider 5th drawing that spans the page underneath the four initial drawings, and a 6th drawing of a curved/arced banner. The line descriptions are as follows:

1. A straight line where the Quadratic curve control point is equal on the Y axis as the starting and ending points.
2. An arc made by placing the control point equidistant between the starting and ending points and raising it above the horizontal plane of the line.
3. A more influenced line biased towards the starting point. The control point is placed much closer to the starting point X value and is still raised above the horizontal plane of the line.
4. The inverse of the previous line, where the control point is now much closer to the ending point X value, but is now lower than the horizontal plane of the line, creating a more concave shape.
5. This line demonstrates smooth curve transitions using both the Q and T commands, creating a sine wave that becomes smaller and decreases in wavelength as it progresses across the page. The curves that go above the horizontal plane are made with Q curves, and the curves that go underneath the horizontal plane are using the T path command, mirroring the position of the control point from the previous drawing command. This makes smoother curve transitions and more complex shapes without having to position multiple quadratic control points.
6. The final drawing is of a blank banner shape. The left and right sides of the banner shape are curved inwards, and the top and bottom of the banner are arced upwards as they stretch across the page. Each side of the banner is drawn with a separate Q command.

Download the Teaching Quad Curves SVG file