Creating a circle with equal segments using SVG and Vue.js
I spent last weekend building a simple app to help plan my life goals. While researching tools and frameworks used for planning life goals, I came across a circle with eight segments, each representing a life segment. I kinda then went like, ‘I am gonna implement a pie chart using SVG and Vue.js without any extra graphic tool or library’. So here is how I did it.
Firstly I read up on SVG, the code bit. Here a few resources I found helpful
Next I had to come up with a plan, which ended up reading like so
- Draw 8 overlapping segments of a circle
- Translate (move them) to the center of the viewing area
- Rotate them (fan them out) into place to form a circle
Here is the code hosted on CodePen.
I later added a click to rotate functionality using Tween.js and SVG transform attribute, but it’s still buggy has it behaves differently across browsers. It works on Chrome and also Firefox, although in a mutually exclusive way.
Implementing the spin was also interesting as I tried a couple of things that didn’t work before arriving at this.