diff --git a/.eslintrc.js b/.eslintrc.js
index d31f6c5..6fd1f68 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,6 +15,7 @@ module.exports = {
     "no-restricted-syntax": "off",
     "guard-for-in": "off",
     "no-case-declarations": "off",
+    "no-use-before-define": "off",
   },
   parserOptions: {
     parser: "babel-eslint",
diff --git a/package-lock.json b/package-lock.json
index 23aff52..9e66773 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0",
+  "version": "2.0.0-alpha.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2493,16 +2493,6 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
       "dev": true
     },
-    "@types/mini-css-extract-plugin": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/webpack": "*"
-      }
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2968,6 +2958,17 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -3015,6 +3016,25 @@
             "path-exists": "^4.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3079,6 +3099,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -3096,6 +3126,18 @@
             "webpack-sources": "^1.4.3"
           }
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.8",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -14772,86 +14814,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index 7ef18a2..1fe77ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
diff --git a/src/App.vue b/src/App.vue
index 375110c..2c87498 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,12 +44,12 @@
           :legendValue="1315.56"
           animation="rs 2000 500"
           :loading="loading"
-          dot="30 red"
+          dot="20 red"
           :reverse="true"
-          line-mode="out 10"
+          line-mode="normal"
           :no-data="noData"
-          :determinate="determinate"
           :data="circles"
+          :determinate="determinate"
         >
           <template v-slot:default="{ counterTick }">
             <span
@@ -90,8 +90,8 @@ export default {
     line: "round",
     price: "",
     circles: [
-      { progress: 50, color: "red", dot: "20 yellow" },
-      { progress: 50, color: "red", half: true, angle: -90, dot: "10 green" },
+      { progress: 50, color: "red" },
+      { progress: 50, color: "yellow" /* half: true, angle: -90, dot: "10 green" */ },
       { progress: 50, color: "blue", reverse: false },
     ],
     determinate: false,
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index ad79ee8..fef91a9 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -1,3 +1,4 @@
+import { emptyRadius, radius } from "@/components/Circle/radiusCalculation";
 import { isValidNumber } from "../../utils";
 
 const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => resolve(), ms));
@@ -29,80 +30,10 @@ export default {
     },
 
     radius() {
-      const { offset } = this.lineMode;
-
-      if (this.options.multiple) {
-        return this.baseRadius - this.previousCirclesThickness;
-      }
-
-      switch (this.lineMode.mode) {
-        case "normal":
-          return this.normalLineModeRadius;
-        case "in":
-          return this.emptyRadius - (this.emptyThickness / 2 + this.thickness / 2 + offset);
-        case "out-over":
-          if (this.emptyThickness <= this.thickness) {
-            return this.baseRadius;
-          }
-          return this.emptyRadius - this.emptyThickness / 2 + this.thickness / 2;
-        case "bottom":
-          return this.emptyRadius - this.emptyThickness / 2;
-        case "top":
-          return this.emptyRadius + this.emptyThickness / 2;
-        default:
-          return this.baseRadius;
-      }
+      return radius(this.options);
     },
     emptyRadius() {
-      const { offset } = this.lineMode;
-
-      if (this.options.multiple) {
-        return this.baseRadius - this.previousCirclesThickness;
-      }
-
-      switch (this.lineMode.mode) {
-        case "normal":
-          return this.normalLineModeRadius;
-        case "in":
-          const dotSizeLimit = this.thickness / 2 + this.emptyThickness + offset;
-          if (this.dotSize / 2 > dotSizeLimit) {
-            return this.emptyBaseRadius - (this.dotSize / 2 - dotSizeLimit);
-          }
-          return this.emptyBaseRadius;
-        case "in-over":
-          if (this.dotToThicknessDifference > 0) {
-            return this.emptyBaseRadius - this.dotToThicknessDifference / 2;
-          }
-          return this.emptyBaseRadius;
-        case "out":
-          return this.baseRadius - (this.thickness / 2 + this.emptyThickness / 2 + offset);
-        case "out-over":
-          if (this.emptyThickness <= this.thickness) {
-            return this.baseRadius - this.thickness / 2 + this.emptyThickness / 2;
-          }
-          return this.emptyBaseRadius;
-        case "bottom":
-          if (this.emptyThickness < this.thicknessWithDot / 2) {
-            return this.emptyBaseRadius - (this.thicknessWithDot / 2 - this.emptyThickness);
-          }
-          return this.emptyBaseRadius;
-        case "top":
-          return this.emptyBaseRadius - this.thicknessWithDot / 2;
-        default:
-          return this.emptyBaseRadius;
-      }
-    },
-    baseRadius() {
-      return this.options.size / 2 - this.thicknessWithDot / 2;
-    },
-    emptyBaseRadius() {
-      return this.options.size / 2 - this.emptyThickness / 2;
-    },
-    normalLineModeRadius() {
-      if (this.thicknessWithDot < this.emptyThickness) {
-        return this.emptyBaseRadius;
-      }
-      return this.baseRadius;
+      return emptyRadius(this.options);
     },
 
     dataIsAvailable() {
@@ -148,10 +79,6 @@ export default {
       return this.options.thickness;
     },
 
-    thicknessWithDot() {
-      return this.thickness < this.dotSize ? this.dotSize : this.thickness;
-    },
-
     globalThickness() {
       return this.options.globalThickness;
     },
@@ -192,29 +119,12 @@ export default {
       return this.options.globalGap;
     },
 
-    previousCirclesThickness() {
-      if (this.options.index === 0) return 0;
-      const currentCircleGap = isValidNumber(this.gap) ? this.gap : this.globalGap;
-      const previousCirclesThickness = [];
-      for (let i = 0; i < this.options.index; i++) {
-        const data = this.options.previousCircles[i];
-        const dot = data.dot ? data.dot.size : this.globalDotSize;
-        const thickness = isValidNumber(data.thickness) ? data.thickness : this.globalThickness;
-        const gap = isValidNumber(data.gap) ? data.gap : this.globalGap;
-        const completeThickness = Math.max(dot, thickness);
-        previousCirclesThickness.push(i > 0 ? completeThickness + gap : completeThickness);
-      }
-      return previousCirclesThickness.reduce((acc, current) => acc + current) + currentCircleGap;
-    },
     dotSize() {
       return this.options.dot.size;
     },
     dotColor() {
       return this.options.dot.color;
     },
-    dotToThicknessDifference() {
-      return this.dotSize - this.thickness;
-    },
     globalDotSize() {
       return this.globalDot.size;
     },
diff --git a/src/components/Circle/radiusCalculation.js b/src/components/Circle/radiusCalculation.js
new file mode 100644
index 0000000..78f9bfb
--- /dev/null
+++ b/src/components/Circle/radiusCalculation.js
@@ -0,0 +1,106 @@
+import { isValidNumber } from "../../utils";
+
+const half = (val) => val / 2;
+
+const thicknessWithDot = (options) => {
+  return Math.max(options.thickness, options.dot.size);
+};
+
+const baseRadius = (options) => {
+  return half(options.size) - half(thicknessWithDot(options));
+};
+const emptyBaseRadius = ({ size, emptyThickness }) => {
+  return half(size) - half(emptyThickness);
+};
+const normalLineModeRadius = (options) => {
+  if (thicknessWithDot(options) < options.emptyThickness) {
+    return emptyBaseRadius(options);
+  }
+  return baseRadius(options);
+};
+
+const previousCirclesThickness = (options) => {
+  if (options.index === 0) return 0;
+  const currentCircleGap = isValidNumber(options.gap) ? options.gap : options.globalGap;
+  const preCirclesThickness = [];
+  for (let i = 0; i < options.previousCircles.length; i++) {
+    const data = options.previousCircles[i];
+    const dot = data.dot ? data.dot.size : options.globalDot.size;
+    const thickness = isValidNumber(data.thickness) ? data.thickness : options.globalThickness;
+    const gap = isValidNumber(data.gap) ? data.gap : options.globalGap;
+    const completeThickness = Math.max(dot, thickness);
+    preCirclesThickness.push(i > 0 ? completeThickness + gap : completeThickness);
+  }
+  return preCirclesThickness.reduce((acc, current) => acc + current) + currentCircleGap;
+};
+
+const radiusNormalMode = (options) => normalLineModeRadius(options);
+const radiusInMode = (options) =>
+  emptyRadius(options) - half(options.emptyThickness + half(options.thickness) + options.lineMode.offset);
+const radiusOutOverMode = (options) => emptyRadius(options) - half(options.emptyThickness);
+const radiusBottomOrTopMode = (options) => {
+  if (options.emptyThickness <= options.thickness) {
+    return baseRadius(options);
+  }
+  return emptyRadius(options) - half(options.emptyThickness) + half(options.thickness);
+};
+
+const emptyRadiusNormalMode = (options) => normalLineModeRadius(options);
+const emptyRadiusInMode = (options) => {
+  const dotSizeLimit = half(options.thickness) + options.emptyThickness + options.lineMode.offset;
+  if (half(options.dot.size) > dotSizeLimit) {
+    return emptyBaseRadius(options) - (half(options.dot.size) - dotSizeLimit);
+  }
+  return emptyBaseRadius(options);
+};
+const emptyRadiusInOverMode = (options) => {
+  const dotToThicknessDifference = options.dot.size - options.thickness;
+  if (dotToThicknessDifference > 0) {
+    return emptyBaseRadius(options) - half(dotToThicknessDifference);
+  }
+  return emptyBaseRadius(options);
+};
+const emptyRadiusOutMode = (options) =>
+  baseRadius(options) - (half(options.thickness) + half(options.emptyThickness) + options.lineMode.offset);
+
+const emptyRadiusOutOverMode = (options) => {
+  if (options.emptyThickness <= options.thickness) {
+    return baseRadius(options) - half(options.thickness) + half(options.emptyThickness);
+  }
+  return emptyBaseRadius(options);
+};
+const emptyRadiusBottomMode = (options) => {
+  if (options.emptyThickness < half(thicknessWithDot(options))) {
+    return emptyBaseRadius(options) - (half(thicknessWithDot(options)) - options.emptyThickness);
+  }
+  return emptyBaseRadius(options);
+};
+const emptyRadiusTopMode = (options) => emptyBaseRadius(options) - half(thicknessWithDot(options));
+
+export const radius = (options) => {
+  const modes = {
+    multiple: () => baseRadius(options) - previousCirclesThickness(options),
+    normal: () => radiusNormalMode(options),
+    in: () => radiusInMode(options),
+    "out-over": () => radiusOutOverMode(options),
+    bottom: () => radiusBottomOrTopMode(options),
+    top: () => radiusBottomOrTopMode(options),
+  };
+  const modeHandler = modes[options.lineMode.mode];
+  return modeHandler ? modeHandler() : baseRadius(options);
+};
+
+export const emptyRadius = (options) => {
+  const modes = {
+    multiple: () => baseRadius(options) - previousCirclesThickness(options),
+    normal: () => emptyRadiusNormalMode(options),
+    in: () => emptyRadiusInMode(options),
+    "in-over": () => emptyRadiusInOverMode(options),
+    out: () => emptyRadiusOutMode(options),
+    "out-over": () => emptyRadiusOutOverMode(options),
+    bottom: () => emptyRadiusBottomMode(options),
+    top: () => emptyRadiusTopMode(options),
+  };
+  const modeHandler = modes[options.lineMode.mode];
+  return modeHandler ? modeHandler() : emptyBaseRadius(options);
+};
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index db6ba42..56b555f 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -72,6 +72,7 @@ export default {
         return this.data.map((options) => ({
           ...this.$props,
           ...options,
+          multiple: true,
           emptyThickness: isValidNumber(options.thickness) ? options.thickness : this.$props.thickness,
           data: undefined, // do not pass data prop
         }));
@@ -91,8 +92,7 @@ export default {
             globalDot: this.dot,
             globalGap: this.gap,
             globalThickness: this.thickness,
-            multiple: this.isMultiple,
-            previousCircles,
+            previousCircles: [...previousCircles],
           }),
         });
         const { gap, thickness, dot } = normalizedCircles[i];
diff --git a/src/components/optionsParser.js b/src/components/optionsParser.js
index ac37831..b142266 100644
--- a/src/components/optionsParser.js
+++ b/src/components/optionsParser.js
@@ -1,9 +1,10 @@
 import { getNumberIfValid, isValidNumber } from "@/utils";
 
-const lineModeParser = (lineMode) => {
-  const lineModeConfig = lineMode.trim().split(" ");
+const lineModeParser = (options) => {
+  const lineModeConfig = options.lineMode.trim().split(" ");
+  const mode = options.multiple ? "multiple" : lineModeConfig[0];
   return {
-    mode: lineModeConfig[0],
+    mode,
     offset: getNumberIfValid(lineModeConfig[1]) || 0,
   };
 };
@@ -50,22 +51,21 @@ const dotParser = (dot) => {
 
 const calcThickness = (thickness, size) => {
   const value = parseFloat(thickness);
-  switch (true) {
-    case thickness.toString().includes("%"):
-      return (value * size) / 100;
-    default:
-      return value;
-  }
+  return thickness.toString().includes("%") ? (value * size) / 100 : value;
 };
 
-export default (options) => ({
-  ...options,
-  thickness: calcThickness(options.thickness, options.size),
-  emptyThickness: calcThickness(options.emptyThickness, options.size),
-  globalThickness: calcThickness(options.thickness, options.size),
-  dot: { ...dotParser(options.dot), size: calcThickness(dotParser(options.dot).size, options.size) },
-  globalDot: { ...dotParser(options.globalDot), size: calcThickness(dotParser(options.globalDot).size, options.size) },
-  dash: dashParser(options.dash),
-  lineMode: lineModeParser(options.lineMode),
-  animation: animationParser(options.animation),
-});
+export default (options) => {
+  const dot = dotParser(options.dot);
+  const globalDot = dotParser(options.globalDot);
+  return {
+    ...options,
+    thickness: calcThickness(options.thickness, options.size),
+    emptyThickness: calcThickness(options.emptyThickness, options.size),
+    globalThickness: calcThickness(options.globalThickness, options.size),
+    dot: { ...dot, size: calcThickness(dot.size, options.size) },
+    globalDot: { ...globalDot, size: calcThickness(globalDot.size, options.size) },
+    dash: dashParser(options.dash),
+    lineMode: lineModeParser(options),
+    animation: animationParser(options.animation),
+  };
+};