This demo puts an editor next to a live preview. It works best on a wider screen (tablet, laptop, or desktop).

Live preview
Quick reference — elements & path commands

Shapes

  • <rect x y width height rx>
  • <circle cx cy r>
  • <ellipse cx cy rx ry>
  • <line x1 y1 x2 y2>
  • <polygon points="x,y x,y …">
  • <polyline>, <path>, <text>, <g>

Paint

  • fill, stroke, stroke-width, opacity

Path d commands

  • M move (pen up)   L line
  • H / V horizontal / vertical line
  • C cubic curve   S smooth cubic
  • Q quadratic   T smooth quadratic
  • A arc   Z close the path

Uppercase = absolute coordinates. lowercase = relative to where the pen is.

Full element reference on MDN →

Reveal an example solution

One way to do it — there are many. Read it, then load it if you like.