Creating a functional component
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.
Getting ready
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.
How to do it...
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...
