Assignment 5: Curves in SVG

by Mike Gleicher on September 30, 2014

This assignment is due Wednesday, October 8th (with a free extension to October 10th, since we didn’t cover the material in class).

You will turn this assignment in via Moodle.


The goal of this assignment is to give you a chance to experiment with Bezier curves, and to make sure you understand the de Casteljau algorithm and other important things.

It’s also a last chance (in this class) to show off your creativity with SVG. And we’ve seen a lot of creative things so far.

What you need to do

Part 1: make a picture using Bezier curves in SVG. If you need some help figuring them out, check out Tutorial 6. Make a picture with a Bezier curve in it. But use this as a chance to get the intuitions for how the control points influence the shape of the curve.

Part 2:  do the de Castlejau algorithm to divide a Bezier segment into pieces. Here, I’ve broken a segment in half, so I could color the same segment with 2 colors (or 1 color).

Part 3: use the de Castlejau algorithm (or some other method) to compute a set of points that are regularly spaced on the curve (in parameters space). At each point draw a mark. You should be able to orient the mark to align with the curve (hint: the de Castlejau algorithm can tell you the derivatives as well as the position – because it tells you the whole curve if you cut the curve at the evaluation point). Here’s a simple example – notice how the points don’t appear evenly spaced, because they are evenly spaced in parameter space (not arc length).

You could do the de Castlejau algorithm by hand. Or you could write a program. You could do something simple like I did. Or you could do something more interesting that lets you experiment with Beziers.

Also, do this for cubic Beziers. If you want to try Quadratic Beziers, go ahead and do those too: but have cubics as well. You can do this for higher order Beziers, but SVG wont draw them for you. You could do higher order Beziers and draw them as a series of tiny line segments (this might give you a sense of how good the SVG curve renderer in your web browser is).

What to turn in

Technically, you could turn in one SVG file (that has something like my two pictures above in 1 picture) and fulfill all of the parts of the assignment.

Probably, you’ll turn in 3 SVG files. One for each part. If you wrote a program to compute things, please include it – we won’t run it, but we’re curious to see it.

If you do some crazy interactive HTML / Javascript thing, thank you. If you can make the thing, you can figure out how to turn it in.


This is graded check/no check/above and beyond. The main point is that you build your intuitions for working with Bezier curves, and check that you can use the de Castlejau algorithm.

Previous post:

Next post: