A lighter version of a component is a functional component. The functional component doesn't have instance variables (so no this) and has no state. In this recipe, we will write a simple functional component that takes some instructions via HTML and turns them into a drawing.
Before attempting this recipe, you should at least become familiar with the render function in Vue. You can use the previous recipes to do that.
When you are writing an <svg> element, you usually have to put data in the attributes of elements inside it to actually draw shapes. For example, if you want to draw a triangle, you have to write the following:
<svg> <path d="M 100 30 L 200 30 L 150 120 z"/> </svg>
The text inside the d attribute is a series of instructions that make a virtual cursor move to draw: M moves the cursor to the (100, 30) coordinate inside the <svg>, then L traces a line up until (200, 30) and then again to the...
