Teaching SVG Curves

Paths and curves are definitely one of the hardest techniques and tools to get right when drawing blind. This example depicts 6 Cubic SVG curves and how the segments are influenced by the positioning of the Cubic control points. Each drawing has a specific id and the control points are illustrated by using circles; all are arranged and labeled in an easy-to-follow method in the file/code itself. The line descriptions are as such:

1. A flat line with the control points on the same Y axis level as the starting and ending points of the segment. The control points are placed one-third and two-thirds of the way across the line on the X-axis.
2. The control points are now at the same position horizontally across the X-axis of the line, but the first control point has been raised above the line and the second has been lowered under the line, creating a subtle sine-wave curve.
3. The curve has been made much more dramatic by moving the first control point higher above the line and the second point under it at an equal amount.
4. Both control points have been moved closer to each other on the X-axis, placed about 10 units apart near the middle of the line segment, but the first control point is still above the line and the second point is still below the line. This creates a dramatic drop of the curve between the two points while having much longer curves stretching out towards them from the starting and ending points.
5. The first control point is now placed directly above the starting point of the line, so an equal distance on the X-axis, but is raised above the starting point. The second control point is placed about two-thirds of the way along the line and is at the same Y=axis as the starting and ending points. This creates a vertical line moving straight upwards from the starting point, then curves out towards the second control point and flattens back into a straight line by the time it gets to the end point.
6. The first control point is now placed further along the line from the starting point, and raised up above the line, and the second control point is placed along the X-axis at the same distance from the ending point, but is also raised above the line instead of below it, though it's position on the Y-axis is closer to the line than the first control point. This shows a more convex angled curve staying above the horizontal plane set by the starting and ending points.

Download the Teaching Curves SVG file