Paths and curves — Writano Docs

The path element — lines, smooth curves, and closed shapes from a handful of letter commands — for anything rectangles can't draw.

Rectangles and circles run out fast; everything else in vector drawing is the <path> element. Its d attribute is a tiny language — a few letter commands — and reading it fluently is what separates copying SVG from writing it.

Step 1 — Straight-line paths

M moves the pen, L draws a line, Z closes the shape:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 40 160 L 120 40 L 200 160 Z"
        fill="none" stroke="black" stroke-width="2"/>
</svg>

That’s a triangle: move to (40,160), lines to two corners, close back to the start. Run after each change — the preview re-renders from the markup.

Step 2 — Smooth curves

Q is a quadratic curve: one control point that the curve bends toward, then the end point:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 30 170 Q 200 -60 370 170"
        fill="none" stroke="black" stroke-width="2"/>
</svg>

The curve leaves (30,170) heading at the control point (200,−60) and arrives at (370,170) — a clean arch. For an S-shape you want C (cubic, two control points):

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 30 100 C 130 -20, 270 220, 370 100"
        fill="none" stroke="black" stroke-width="2"/>
</svg>

Step 3 — A waveform, programmatic thinking by hand

Chaining curve segments draws signals and waveforms; lowercase letters are relative moves, which keeps repetition readable:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 20 100 q 22 -80 45 0 q 22 80 45 0 q 22 -80 45 0 q 22 80 45 0 q 22 -80 45 0"
        fill="none" stroke="black" stroke-width="2"/>
  <text x="200" y="180" text-anchor="middle" font-size="14">one oscillation ≈ 90 units</text>
</svg>

Each q 22 -80 45 0 is “half a wave, relative to where the pen is” — five repeats, five cycles, no coordinate arithmetic.

Step 4 — Filled regions

Close a path and give it a translucent fill to mark an area — a shaded region under a curve, an acceptance window:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 100 160 Q 200 20 300 160 Z" fill="#7c3aed" fill-opacity="0.15"
        stroke="#7c3aed" stroke-width="1.5"/>
  <line x1="30" y1="160" x2="370" y2="160" stroke="black" stroke-width="2"/>
</svg>

Step 5 — Export or insert

Export / Insert — vector PDF or into the paper with a \label. Paths stay true curves all the way to print: no resolution, no jaggies, ever.

Tip: When a curve won’t behave, draw its control points temporarily as small circles — seeing where the handles are turns guess-and-check into geometry.