Hi, I'm Nicholas Johnson!

software engineer / trainer / AI enthusiast


We can draw arbitrary paths using SVG. The syntax for this is a little obscure, but it merits some understanding.


We create a path using the element. This has an attribute d which defines the path. D uses a series of letter codes to tell the cursor how to move around.

Straight lines

The following will draw a 50 px horizontal line.

<svg width="300" height="300">
  <path d="M 10 10 h 50 " fill="transparent" stroke="black" />
  • M x y - Move
  • L x y - Line
  • H x - Horizontal line
  • V y - Vertical line
  • Z - Close a path from wherever you are

Here’s a square:

<svg width="300" height="300">
  <path d="M 10 10 h 50 v 50 h-50 z" fill="transparent" stroke="black" />


We can also draw bezier curves:

<svg width="300" height="300">
  <path d="M10 10 C 20 20, 50 20, 200 10" stroke="black" fill="transparent" />

We specify:

  1. Control point one
  2. Control point two
  3. Final point


Finally we can draw arcs. The key thing to remember with arcs is they have a fixed start and end point. The radius will be adapted to conform to these points.

<svg width="300" height="300">
    d="M 30 50 A 40 50 0 0 1 162.55 162.45"

Exercise - Draw a little house

Let’s do something simple. Please draw a little picture of your house. Use lines and arcs as you see fit.