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.

Final result

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.

Spinning wheel

Implementing the spin was also interesting as I tried a couple of things that didn’t work before arriving at this.