.colorwheel {
  width: 25rem;
  height: 25rem;
  margin-left: -5rem;
  margin-top: -5rem
}
View Compiled
const colors = {"turquoise": [{"name": "Turquoise 100","hex": "#e1f7f9"},{"name": "Turquoise 200","hex": "#b1eaef"},{"name": "Turquoise 300","hex": "#80e1e8"},{"name": "Turquoise 400","hex": "#4fd5e0"},{"name": "Turquoise 500","hex": "#00b9cc"},{"name": "Turquoise 600","hex": "#00a1b2"},{"name": "Turquoise 700","hex": "#00848e"},{"name": "Turquoise 800","hex": "#006f77"},{"name": "Turquoise 900","hex": "#005559"}],"green": [{"name": "Green 100","hex" : "#e8f9dc"},{"name": "Green 200","hex" : "#d2efbe"},{"name": "Green 300","hex" : "#bee5a3"},{"name": "Green 400","hex" : "#9cd575"},{"name": "Green 500","hex" : "#7dc540"},{"name": "Green 600","hex" : "#5ead35"},{"name": "Green 700","hex" : "#3f962a"},{"name": "Green 800","hex" : "#1f7e1e"},{"name": "Green 900","hex" : "#006613"}],"blue": [{"name": "Blue 100","hex": "#e0f4fc"},{"name": "Blue 200","hex": "#b4e5f9"},{"name": "Blue 300","hex": "#82d8f9"},{"name": "Blue 400","hex": "#2ab6f4"},{"name": "Blue 500","hex": "#00a6fb"},{"name": "Blue 600","hex": "#008cdb"},{"name": "Blue 700","hex": "#006bba"},{"name": "Blue 800","hex": "#004999"},{"name": "Blue 900","hex": "#003a8a"}],"royalblue": [{"name": "Royal blue 100","hex": "#e6e8ff"},{"name": "Royal blue 200","hex": "#bdc9ff"},{"name": "Royal blue 300","hex": "#95abff"},{"name": "Royal blue 400","hex": "#6c8cff"},{"name": "Royal blue 500","hex": "#466eff"},{"name": "Royal blue 600","hex": "#4756dd"},{"name": "Royal blue 700","hex": "#3d40b8"},{"name": "Royal blue 800","hex": "#322a93"},{"name": "Royal blue 900","hex": "#23146e"}],"purple": [{"name": "Purple 100","hex": "#efdeff"},{"name": "Purple 200","hex": "#e2c0f7"},{"name": "Purple 300","hex": "#c396e0"},{"name": "Purple 400","hex": "#a972cc"},{"name": "Purple 500","hex": "#9355b7"},{"name": "Purple 600","hex": "#7b38a1"},{"name": "Purple 700","hex": "#612c85"},{"name": "Purple 800","hex": "#522273"},{"name": "Purple 900","hex": "#481f61"}],"red": [{"name":"Red 100","hex": "#ffeae8"},{"name":"Red 200","hex": "#fdb8b8"},{"name":"Red 300","hex": "#f28289"},{"name":"Red 400","hex": "#e74d59"},{"name":"Red 500","hex": "#dc172a"},{"name":"Red 600","hex": "#c41121"},{"name":"Red 700","hex": "#ab0c17"},{"name":"Red 800","hex": "#93060e"},{"name":"Red 900","hex": "#7a0004"}],"orange": [{"name": "Orange 100","hex": "#fff5e4"},{"name": "Orange 200","hex": "#ffd0ab"},{"name": "Orange 300","hex": "#ffa86c"},{"name": "Orange 400","hex": "#ff802d"},{"name": "Orange 500","hex": "#ef651f"},{"name": "Orange 600","hex": "#d3571a"},{"name": "Orange 700","hex": "#b64915"},{"name": "Orange 800","hex": "#92380e"},{"name": "Orange 900","hex": "#702e0a"}],"yellow" : [{"name": "Yellow 100","hex": "#fff9d5"},{"name": "Yellow 200","hex": "#fff197"},{"name": "Yellow 300","hex": "#ffeb6a"},{"name": "Yellow 400","hex": "#ffe11c"},{"name": "Yellow 500","hex": "#f3d00e"},{"name": "Yellow 600","hex": "#e6be00"},{"name": "Yellow 700","hex": "#c9a000"},{"name": "Yellow 800","hex": "#ab8300"},{"name": "Yellow 900","hex": "#8e6500"}],"shamrock" : [{"name": "Shamrock green 100","hex": "#e1f7dc"},{"name": "Shamrock green 200","hex": "#beebc3"},{"name": "Shamrock green 300","hex": "#99dea8"},{"name": "Shamrock green 400","hex": "#73d091"},{"name": "Shamrock green 500","hex": "#54c27d"},{"name": "Shamrock green 600","hex": "#2ab06f"},{"name": "Shamrock green 700","hex": "#009e60"},{"name": "Shamrock green 800","hex": "#048855"},{"name": "Shamrock green 900","hex": "#087249"}],"gray" : [{"name": "Gray 50","hex": "#fafafa"},{"name": "Gray 100","hex": "#f8f8f8"},{"name": "Gray 130","hex": "#f2f2f2"},{"name": "Gray 160","hex": "#ececec"},{"name": "Gray 200","hex": "#e6e6e6"},{"name": "Gray 300","hex": "#cccccc"},{"name": "Gray 400","hex": "#b7b7b7"},{"name": "Gray 460","hex": "#a0a0a0"},{"name": "Gray 500","hex": "#898989"},{"name": "Gray 600","hex": "#6d6d6d"},{"name": "Gray 620","hex": "#606060"},{"name": "Gray 640","hex": "#525252"},{"name": "Gray 700","hex": "#454646"},{"name": "Gray 800","hex": "#353535"},{"name": "Gray 860","hex": "#242424"},{"name": "Gray 900","hex": "#191919"}]};

const namespace = 'http://www.w3.org/2000/svg';

const createColorwheel = () => {
  let colorwheel = document.createElementNS(namespace, 'svg');
  colorwheel.classList.add('colorwheel');
  colorwheel.setAttribute('viewBox', '0 0 100 100');

  // create clip paths
  let segments = Object.keys(colors).length;
  let angle = (360 / segments) * Math.PI / 180;

  const defs = document.createElementNS(namespace, 'defs');
  for (let i = 0; i < segments; i++) {
    const clipPath = document.createElementNS(namespace, 'clipPath');
    const poly = document.createElementNS(namespace, 'polygon');
    let endpoint1X = 50 + 60 * Math.cos(angle*i);
    let endpoint1Y = 50 + 60 * Math.sin(angle*i);
    let endpoint2X = 50 + 60 * Math.cos(angle * (i+1));
    let endpoint2Y = 50 + 60 * Math.sin(angle * (i+1));
    let points= `50,50 ${endpoint1X},${endpoint1Y} ${endpoint2X},${endpoint2Y}`;

    poly.setAttribute('points', points);
    poly.setAttribute('fill', '#ff2200');
    clipPath.setAttribute('id', Object.keys(colors)[i]+'-mask');
    clipPath.appendChild(poly);
    defs.appendChild(clipPath);
  }
  colorwheel.appendChild(defs);

  // find max
  let groupMaxSteps = 0;
  Object.keys(colors).forEach((group) => {
    if(colors[group].length > groupMaxSteps) {
      groupMaxSteps = colors[group].length;
    }
  });

  // create circles
  Object.keys(colors).forEach((group) => {
    let index = 1;
    const groupelement = document.createElementNS(namespace, 'g');
    groupelement.setAttribute('clip-path', 'url(#'+group+'-mask)');
    for(let i = colors[group].length-1; i >= 0; i--) {
      const circle = document.createElementNS(namespace, 'circle');
      circle.setAttribute('cx', '50');
      circle.setAttribute('cy', '50');
      const radius = 50 / groupMaxSteps * i;
      circle.setAttribute('r', radius);
      circle.setAttribute('fill', colors[group][i].hex);
      groupelement.appendChild(circle);
    }
    colorwheel.appendChild(groupelement);
  });

  return colorwheel;
};

const node = createColorwheel();
document.body.appendChild(node);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.