There are basically 2 ways to create vector graphics: you can draw them by hand with a Wacom pen or similar, or you can write a script that draws the graphics for you. The way you are describing what you want to do suggests you should investigate scripting first. Your post is basically a specification that describes vector graphics already. You just have to rewrite it in a machine-readable way.
Here is a great learning resource for scripting the Web canvas:
HTML Canvas Deep Dive
You can also create vectors with an HTML-like markup language called Scalable Vector Graphics (SVG) which can also be rendered in any Web browser, as well as imported into vector drawing tools. SVG code looks much, much more complicated than it actually is. With a little bit of learning, it appears much simpler.
Here is a great electronic book that teaches you to hand-code graphics in SVG:
Learn SVG Interactively by Jay Nick