Day 15: How to Draw a Ribbon with SVG

After we learned about quadratic Bézier curves and cubic Bézier curves let’s do another practice round where we use both.

We start with the right side of the ribbon with a quadratic Bézier curve. The dot represents the control point again.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 -20
      Q 28 -40 56 -45"
    fill="#B73A3B"
  />
</svg>

Then we continue with a cubic Bézier.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 -20
      Q 28 -40 56 -45
      C 96 -48 96 48 56 45"
    fill="#B73A3B"
  />
</svg>

And finish up with another quadratic cubic Bézier that mirrors the first one.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 -20
      Q 28 -40 56 -45
      C 96 -48 96 48 56 45
      Q 28 40 0 20"
    fill="#B73A3B"
  />
</svg>

Then we can move the whole shape into a reusable component and use it for both sizes. Note that to mirror it to the left side we use negative scaling.

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <defs>
    <path
      id="ribbon"
      d="
        M 0 -20
        Q 28 -40 56 -45
        C 96 -48 96 48 56 45
        Q 28 40 0 20"
      fill="#B73A3B"
    />
  </defs>

  <use href="#ribbon" />
  <use 
    href="#ribbon"
    transform="scale(-1)" 
  />
</svg>

We finish up the image by adding an ellipse element in the middle and a stroke for the rest.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path
      id="ribbon"
      d="
        M 0 -20
        Q 28 -40 56 -45
        C 96 -48 96 48 56 45
        Q 28 40 0 20"
      fill="#B73A3B"
    />
  </defs>

  <use href="#ribbon" />
  <use href="#ribbon" transform="scale(-1)" />
  <ellipse cx="0" cy="0" rx="20" ry="24" fill="#9C2D2A" />

  <path
    d="
      M 0 20
      Q 40 40 30 60
      Q 20 80 40 90

      M 0 20
      Q -30 30 -20 60
      Q -10 90 -50 100"
    fill="none"
    stroke="#B73A3B"
    stroke-width="3"
  />
</svg>