# 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

Brilliant.

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:

- 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.
- The control point must sit inside some set of allowed values, so the curve is not too extreme.
- The bezier curve should scale proportionally.
- 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
};
console.log(q);
var line = paper
.path("M" + s.x + "," + s.y + ",Q" + q.x + "," + q.y + "," + e.x + "," + e.y)
.attr({
fill: "none",
stroke: "#333",
strokeWidth: 3
});
```

Nice. Thanks Rachel.