Name: Master SVG Path: Drawing Cubic Curves (C, S Commands)
Description: Cubic Bézier curves power most of the web's vector graphics

Cubic Bézier curves power most of the web’s vector graphics. In this lesson, we break down the C and S commands and explain how two control points shape a curve.

You’ll learn why cubic curves are more flexible than quadratic curves, how control handles influence direction and tension, how smooth continuation (S) works, and how to read complex path data without guessing.

<html>
  <head>
    <style>
      body {
        background-color: #222;
      }
      path {
        stroke: #fff;
        fill: none;
        stroke-width: 3px;
      }
      circle {
        fill: yellow;
      }
    </style>
  </head>

  <body>
    <svg width="550" height="800">
      <path d="M10 100, C10 10, 100 10, 100 100, S10 190, 10 100"></path>
      <path d="M250 100, c0 -90, 90 -90, 90 0, s-90 90, -90 0"></path>

      <!-- control points -->
      <circle cx="10" cy="10" r="3"></circle>
      <circle cx="100" cy="10" r="3"></circle>
      <circle cx="100" cy="190" r="3"></circle>
      <circle cx="10" cy="190" r="3"></circle>

      <!-- start/end -->
      <circle cx="10" cy="100" r="3"></circle>
      <circle cx="100" cy="100" r="3"></circle>
    </svg>
  </body>
</html>