Grokking quadratic bézier curves with Rachel Smith

So I want my straight and stodgy arrow to look more relaxed and hand drawn. That means taking on bezier curves, which made me cringe. But with a little help from Rachel Smith, who does a fantastic workup in her codepen blog, it’s not so scary.

Googling “snap svg bezier curves” didn’t return anything good besides the API reference. So I just tried “bezier curves” on codepen, and found this 2-3 pages into the results:

The Quadratic Bézier Curve in SVG by Rachel Smith (@rachsmith) on CodePen


So, after 45 minutes of skimming Rachel’s twitter feed, following her, following her dev shop(Active Theory) and some of the hot shot designers/developers she follows, I got to reading her blog post on bezier curves.

In application

The requirements:

  1. Eventually, when a user wants to add several arrows to annotate an image or document, each arrow should be unique. It should have a random control point giving each on a different bezier curve.
  2. The control point must sit inside some set of allowed values, so the curve is not too extreme.
  3. The bezier curve should scale proportionally.
  4. The bezier curve should hold when the arrow is rotated.

Step 1: Find a random control point in the initial state

To make my math easier (for me), I’m going to align the end points of my arrow on the x-axis. I want my control point to fall in a rectanglebetween the two points:


If I wanted the initial length of the arrow to be 100 pixels, and the sides of that rectangle area to be… a square of 50×50, then my initial line would be:

var s = {x: 40, y: 50};  
var e = {x: 240, y: 50};  
var q = {  
   x: Math.random()*100+90, 
   y: Math.random()*100 
var line = paper  
   .path("M" + s.x + "," + s.y + ",Q" + q.x + "," + q.y + "," + e.x + "," + e.y)
      fill: "none", 
      stroke: "#333", 
      strokeWidth: 3 

Nice. Thanks Rachel.