We already know how to round corners, let the round macro do it:

macro("round", {
  from: points.topLeft,
  to: points.bottomRight,
  via: points.bottomLeft,
  radius: points.bottomRight.x / 4,
  prefix: "bottomLeft"
macro("round", {
  from: points.bottomLeft,
  to: points.topRight,
  via: points.bottomRight,
  radius: points.bottomRight.x / 4,
  prefix: "bottomRight"

But there’s still something to be learned here. If you look at our earlier use of the round macro, you’ll notice that we used this line:

  render: true,

This instructs the round macro create a path that draws the rounded corner. Whereas by default, it merely constructs the points required to round the corner.

Typically, your rounded corner will be part of a larger path and so you don’t want the macro to draw it. That’s why the round macro’s render property defaults to false.

We’ve left it out here, and you should also remove it from your earlier use of the round macro. We merely set render to true at that time so you could see what the macro was doing.

With our corners rounded, we should update our path. Fortunately, we merely have to update the start of it. Replace this:

paths.seam = new Path()

With this:

paths.seam = new Path()
  .curve(points.bottomLeftCp1, points.bottomLeftCp2, points.bottomLeftEnd)
  .curve(points.bottomRightCp1, points.bottomRightCp2, points.bottomRightEnd)

and keep the rest of the path as it was.

The shape our bib is now completed:

That is looking a lot like a bib