<h1>Palette Selector</h1>
<p><em>An example of a responsive, animated, interactive SVG</em></p>
<div id="steps">
  <div id="step1" class="step">
      <p>
        <label for="palette">Select a palette. </label>
        <select id="palette" aria-controls="color-p">
         <option value=""></option>  <option value="monochromatic">monochromatic</option>
          <option value="analogous">analogous</option>
          <option value="complementary">complementary</option>
          <option value="split complementary">split complementary</option>
          <option value="triadic">triadic</option>
          <option value="tetradic">tetradic</option>
          <option value="compound">compound</option>
        </select>
      </p>
      <p id="color-p" class="disabled">
        <label for="color">Select a color. </label>
        <span id="color">
          <button label="red" aria-controls="step2" disabled></button>
          <button label="red-orange" aria-controls="step2" disabled></button>
          <button label="orange" aria-controls="step2" disabled></button>
          <button label="yellow-orange" aria-controls="step2" disabled></button>
          <button label="yellow" aria-controls="step2" disabled></button>
          <button label="yellow-green" aria-controls="step2" disabled></button>
          <button label="green" aria-controls="step2" disabled></button>
          <button label="blue-green" aria-controls="step2" disabled></button>
          <button label="blue" aria-controls="step2" disabled></button>
          <button label="blue-violet" aria-controls="step2" disabled></button>
          <button label="violet" aria-controls="step3" disabled></button>
          <button label="red-violet" aria-controls="step2" disabled></button>
        </span>
      </p>
    </div>
  <div id="step2" class="step" aria-hidden="true">
    <p>View your colors on the color wheel.</p>
    <svg id="wheel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 217.88 217.38" aria-labelledby="wheel-title"  aria-describedby="wheel-desc">
      <title id="wheel-title">Color Wheel</title>
      <desc id="wheel-desc">A color wheel with 12 slices of color. Each slice has a swatch for hue, tint, tone, shade.</desc>
      <g id="red" aria-label="red slice">
        <path id="redhue" d="M213.8,80.28a104,104,0,0,0-28.14-48.74L169.15,48.05a85.49,85.49,0,0,1,22.1,38.27" style="fill: #fd0011" aria-label="red hue"/>
        <path id="redtint" d="M169.15,48.05,151.73,65.48A58.86,58.86,0,0,1,167.45,92.7l23.8-6.38a85.49,85.49,0,0,0-22.1-38.27Z" style="fill: #ff394c" aria-label="red tint"/>
        <path id="redtone" d="M151.73,65.48,134,83.19a34.56,34.56,0,0,1,9.24,16l24.18-6.48a58.73,58.73,0,0,0-15.71-27.22Z" style="fill: #dd2638" aria-label="red tone"/>
        <path id="redshade" d="M108.8,108.42l34.46-9.24a34.56,34.56,0,0,0-9.24-16Z" style="fill: #c90014" aria-label="red shade"/>
      </g>
      <g id="redorange" aria-label="red-orange slice">
        <path id="redorangehue" d="M186.09,31.73A103.79,103.79,0,0,0,137.35,3.59l-6,22.54a85.56,85.56,0,0,1,38.28,22.1" style="fill: #fe6417" aria-label="red-orange hue"/>
        <path id="redorangetint" d="M131.31,26.13l-6.37,23.81a58.86,58.86,0,0,1,27.22,15.72l17.43-17.43a85.56,85.56,0,0,0-38.28-22.1Z" style="fill: #ff7d4a" aria-label="red-orange tint"/>
        <path id="redorangetone" d="M124.94,49.94l-6.48,24.19a34.65,34.65,0,0,1,8.63,3.53,35,35,0,0,1,7.37,5.7l17.7-17.7A58.33,58.33,0,0,0,139.62,56,59.07,59.07,0,0,0,124.94,49.94Z" style="fill: #dd622c" aria-label="red-orange tone"/>
        <path id="redorangeshade" d="M109.23,108.59l25.23-25.23a35,35,0,0,0-7.37-5.7,34.65,34.65,0,0,0-8.63-3.53Z" style="fill: #d84200" aria-label="red-orange shade"/>
      </g>
      <g id="orange" aria-label="orange slice">
        <path id="orangehue" d="M137.33,3.88a104,104,0,0,0-56.28,0l6,22.55a85.48,85.48,0,0,1,44.19,0" style="fill: #fe921e" aria-label="orange hue"/>
        <path id="orangetint" d="M87.09,26.43l6.39,23.8a58.77,58.77,0,0,1,31.43,0l6.38-23.81a85.52,85.52,0,0,0-44.2,0Z" style="fill: #ffa64d" aria-label="orange tint"/>
        <path id="orangetone" d="M93.47,50.24,100,74.42a34.47,34.47,0,0,1,18.47,0l6.48-24.19a58.68,58.68,0,0,0-31.44,0Z" style="fill: #d17a2c" aria-label="orange tone"/>
        <path id="orangeshade" d="M109.19,108.88l9.24-34.46a34.47,34.47,0,0,0-18.47,0Z" style="fill: #c45d00" aria-label="orange shade"/>
      </g>
      <g id="yelloworange" aria-label="yellow-orange slice">
        <path id="yelloworangehue" d="M81,3.59A103.84,103.84,0,0,0,32.29,31.73L48.8,48.23a85.49,85.49,0,0,1,38.27-22.1" style="fill: #fc0" aria-label="yellow-orange hue"/>
        <path id="yelloworangetint" d="M48.8,48.23,66.23,65.65A58.73,58.73,0,0,1,93.45,49.94L87.07,26.13A85.49,85.49,0,0,0,48.8,48.23Z" style="fill: #ffd833" aria-label="yellow-orange tint"/>
        <path id="yelloworangetone" d="M66.23,65.66l17.71,17.7a34.56,34.56,0,0,1,16-9.24L93.45,49.94A58.63,58.63,0,0,0,66.23,65.66Z" style="fill: #d8b525" aria-label="yellow-orange tone"/>
        <path id="yelloworangeshade" d="M109.17,108.58,99.93,74.12a34.56,34.56,0,0,0-16,9.24Z" style="fill: #cca500" aria-label="yellow-orange shade"/>
      </g>
      <g id="yellow" aria-label="yellow slice">
        <path id="yellowhue" d="M32,31.54A103.84,103.84,0,0,0,3.84,80.28l22.54,6a86,86,0,0,1,8.54-20.6A85.14,85.14,0,0,1,48.48,48" style="fill: #fffc30" aria-label="yellow hue"/>
        <path id="yellowtint" d="M26.38,86.32,50.19,92.7A58.82,58.82,0,0,1,65.91,65.47L48.48,48A85.14,85.14,0,0,0,34.92,65.72,86,86,0,0,0,26.38,86.32Z" style="fill: #fff364" aria-label="yellow tint"/>
        <path id="yellowtone" d="M50.19,92.7l24.19,6.47a34.52,34.52,0,0,1,9.23-16L65.91,65.47A58.82,58.82,0,0,0,50.19,92.7Z" style="fill: #ddd53e" aria-label="yellow tone"/>
        <path id="yellowshade" d="M108.84,108.4,83.61,83.18a34.52,34.52,0,0,0-9.23,16Z" style="fill: #d3c518" aria-label="yellow shade"/>
      </g>
      <g id="yellowgreen" aria-label="yellow-green slice">
        <path id="yellowgreenhue" d="M3.88,80.3a104,104,0,0,0,0,56.28l22.55-6a85.52,85.52,0,0,1,0-44.2" style="fill: #8ec521" aria-label="yellow-green hue"/>
        <path id="yellowgreentint" d="M26.43,130.54l23.8-6.38a58.81,58.81,0,0,1,0-31.44L26.42,86.34a85.52,85.52,0,0,0,0,44.2Z" style="fill: #afd650" aria-label="yellow-green tint"/>
        <path id="yellowgreentone" d="M50.24,124.16l24.18-6.49a34.47,34.47,0,0,1,0-18.47L50.23,92.72a58.68,58.68,0,0,0,0,31.44Z" style="fill: #93ad40" aria-label="yellow-green tone"/>
        <path id="yellowgreenshade" d="M108.88,108.44,74.42,99.21a34.28,34.28,0,0,0-1.26,9.23,34.81,34.81,0,0,0,1.26,9.24Z" style="fill: #749e0e" aria-label="yellow-green shade"/>
      </g>
      <g id="green" aria-label="green slice">
        <path id="greenhue" d="M4.09,136.6a103.79,103.79,0,0,0,28.14,48.74l16.5-16.51a85.49,85.49,0,0,1-22.1-38.27" style="fill: #21ab1a"/>
        <path id="greentint" d="M48.73,168.83,66.15,151.4a58.73,58.73,0,0,1-15.71-27.22l-23.81,6.38a85.49,85.49,0,0,0,22.1,38.27Z" style="fill: #43c638"/>
        <path id="greentone" d="M66.16,151.4l17.7-17.71a34.56,34.56,0,0,1-9.24-16l-24.18,6.48A58.63,58.63,0,0,0,66.16,151.4Z" style="fill: #348e2d"/>
        <path id="greenshade" d="M109.08,108.46,74.62,117.7a34.56,34.56,0,0,0,9.24,16Z" style="fill: #14840b"/>
      </g>
      <g id="bluegreen" aria-label="blue-green slice">
        <path id="bluegreenhue" d="M32,185.41a104,104,0,0,0,48.74,28.14l6-22.55a85.56,85.56,0,0,1-38.28-22.1" style="fill: #0da4c6" aria-label="blue-green hue"/>
        <path id="bluegreentint" d="M86.82,191l6.38-23.81A58.82,58.82,0,0,1,66,151.47L48.54,168.9A85.56,85.56,0,0,0,86.82,191Z" style="fill: #2dc8e2" aria-label="blue-green tint"/>
        <path id="bluegreentone" d="M93.2,167.19,99.67,143a34.52,34.52,0,0,1-16-9.23L66,151.47A58.82,58.82,0,0,0,93.2,167.19Z" style="fill: #259aad" aria-label="blue-green tone"/>
        <path id="bluegreenshade" d="M108.9,108.54,83.68,133.77a34.52,34.52,0,0,0,16,9.23Z" style="fill: #008c93" aria-label="blue-green shade"/>
      </g>
      <g id="blue" aria-label="blue slice">
        <path d="M80.8,213.5a103.85,103.85,0,0,0,56.28,0L131,191a85.52,85.52,0,0,1-44.2,0" style="fill: #0067b3" aria-label="blue hue"/>
        <path d="M131,191l-6.38-23.8a58.81,58.81,0,0,1-31.44,0L86.84,191a85.52,85.52,0,0,0,44.2,0Z" style="fill: #1d8acc" aria-label="blue tint"/>
        <path d="M124.66,167.15,118.17,143a34.47,34.47,0,0,1-18.47,0l-6.48,24.19a58.81,58.81,0,0,0,31.44,0Z" style="fill: #196a9b"  aria-label="blue tone"/>
        <path d="M108.94,108.5,99.71,143a34.47,34.47,0,0,0,18.47,0Z" style="fill: #005284"  aria-label="blue shade"/>
      </g>
      <g id="blueviolet" aria-label="blue-violet slice">
        <path id="blueviolethue" d="M137.1,213.55a104,104,0,0,0,48.74-28.14L169.33,168.9A85.49,85.49,0,0,1,131.06,191" style="fill: #0020a3" aria-label="blue-violet hue"/>
        <path id="blueviolettint" d="M169.33,168.9,151.9,151.48a58.86,58.86,0,0,1-27.22,15.72l6.38,23.8a85.49,85.49,0,0,0,38.27-22.1Z" style="fill: #1e46c4" aria-label="blue-violet tint"/>
        <path id="blueviolettone" d="M151.9,151.48l-17.71-17.71a34.56,34.56,0,0,1-16,9.24l6.48,24.18a58.73,58.73,0,0,0,27.22-15.71Z" style="fill: #193384" aria-label="blue-violet tone"/>
        <path id="bluevioletshade" d="M109,108.55,118.2,143a34.56,34.56,0,0,0,16-9.24Z" style="fill: #001968" aria-label="blue-violet shade"/>
      </g>
      <g id="violet" aria-label="violet slice">
        <path id="violethue" d="M185.91,185.34a104,104,0,0,0,28.14-48.74l-22.55-6a85.56,85.56,0,0,1-22.1,38.28" style="fill: #6118a3" aria-label="violet hue"/>
        <path id="violettint" d="M191.5,130.56l-23.81-6.37A58.86,58.86,0,0,1,152,151.41l17.43,17.43a85.56,85.56,0,0,0,22.1-38.28Z" style="fill: #7a36c1" aria-label="violet tint"/>
        <path id="violettone" d="M167.69,124.19l-24.19-6.48a34.27,34.27,0,0,1-3.53,8.63,35,35,0,0,1-5.7,7.37l17.7,17.7a58.86,58.86,0,0,0,15.72-27.22Z" style="fill: #52267f" aria-label="violet tone"/>
        <path id="violetshade" d="M109,108.48l25.23,25.23a35,35,0,0,0,5.7-7.37,34.27,34.27,0,0,0,3.53-8.63Z" style="fill: #3f087a" aria-label="violet shade"/>
      </g>
      <g id="redviolet" aria-label="red-violet slice">
        <path id="redviolethue" d="M214,136.58a103.85,103.85,0,0,0,0-56.28l-22.55,6a85.48,85.48,0,0,1,0,44.19" style="fill: #c30d7b" aria-label="red-violet hue"/>
        <path id="redviolettint" d="M191.45,86.34l-23.8,6.39a58.77,58.77,0,0,1,0,31.43l23.81,6.38a85.52,85.52,0,0,0,0-44.2Z" style="fill: #dd319f" aria-label="red-violet tint"/>
        <path id="redviolettone" d="M167.65,92.72l-24.19,6.49a34.47,34.47,0,0,1,0,18.47l24.19,6.48a58.81,58.81,0,0,0,0-31.44Z" style="fill: #aa277b" aria-label="red-violet tone"/>
        <path id="redvioletshade" d="M109,108.44l34.46,9.24a34.47,34.47,0,0,0,0-18.47Z" style="fill: #93005f" aria-label="red-violet shade"/>
      </g>
    </svg>
  </div>
  <div id="step3" class="step" aria-hidden="true">
    <p>Preview using these swatches.</p>
    <svg id="stars" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" aria-labelledby="stars-title" aria-describedby="stars-desc">
      <title id="stars-title">Stars Palette Preview</title>
      <desc id="stars-desc">
        <p>A graphic <span id="color-palette"></span>with a <span id="stripe-color"></span>stripe and  <span id="small-stars-color"></span>small stars,  <span id="med-stars-color"></span>medium stars, and  <span id="large-stars-color"></span>large stars.</p>
      </desc>
      <path id="stripe" d="M0 29h310v84H0z"/>
      <g id="med-stars">
        <path d="M41 3l8 16 18 3-13 13 3 18-16-9-16 9 3-18-13-13 18-3 8-16zM218 87l2 18 16 9-17 7-3 18-13-14-18 3 9-16-8-17 18 4 14-12zM212 0l5 18 18 6-16 10v18l-14-11-18 5 6-17-10-15 18 1 11-15z"/>
      </g>
      <g id="large-stars">
        <path d="M71 59l6 28 26 11-25 14-2 29-21-20-28 6 12-26-15-24 29 3 18-21zM160 30l8 27 27 9-23 16v29l-23-17-27 9 9-27-17-23h29l17-23zM254 31l19 21 28-3-14 24 12 26-28-6-21 20-3-29-25-14 26-11 6-28z"/>
      </g>
      <g id="small-stars">
        <path d="M89 29l6 7 9-2-4 8 5 8-9-1-6 7-2-9-9-4 9-4 1-10zM126 110l7 6 9-2-4 9 4 8-9-1-6 7-2-9-8-4 8-5 1-9zM132 2l3 8 9 3-7 5 1 10-8-6-9 4 3-9-6-7 9-1 5-7zM277 3l7 7 9-2-4 8 5 8-10-1-6 7-1-9-9-4 8-4 1-10zM260 118l7 6 9-2-4 9 5 8-10-1-6 7-2-10-8-3 8-5 1-9z"/>
      </g>
    </svg>
  </div> 
</div>
<p><a href="#">back to top</a></p>

.step {
  border: 1px solid #eee;
  padding: 10px 20px;
  margin: 5px 10px;
}
#step2[aria-hidden="true"] > *:not(svg),
#step3[aria-hidden="true"],
button[disabled],
#wheel g[aria-hidden="true"]{
  opacity: 0.3;
  transition: opacity 0.5s;
}
#color button {
  width: 1.5em;
  height: 1.5em;
  outline: 1px solid black;
  border: none;
}
#color button:focus,
#color button:hover {
  cursor: pointer;
  outline: none;
}
#color button[disabled] {
  cursor: not-allowed;
}
#color button[label="red"] { background-color: #fd0011; }
#color button[label="red-orange"] { background-color: #fe6417; }
#color button[label="orange"] { background-color: #fe921e; }
#color button[label="yellow-orange"] { background-color: #fc0; }
#color button[label="yellow"] { background-color: #fffc30; }
#color button[label="yellow-green"] { background-color: #8ec521; }
#color button[label="green"] { background-color: #21ab1a; }
#color button[label="blue-green"] { background-color: #0da4c6; }
#color button[label="blue"] { background-color: #0067b3; }
#color button[label="blue-violet"] { background-color: #0020a3; }
#color button[label="violet"] { background-color: #6118a3; }
#color button[label="red-violet"] { background-color: #c30d7b; }
#wheel { 
  width: 100%; 
  max-width: 250px;
  transition: transform 0.5s ease-in-out;
}
#wheel { transform: rotate(0deg); }
#wheel.red-orange { transform: rotate(-30deg); }
#wheel.red { transform: rotate(-60deg); }
#wheel.red-violet { transform: rotate(-90deg); }
#wheel.violet { transform: rotate(-120deg); }
#wheel.blue-violet { transform: rotate(-150deg); }
#wheel.blue { transform: rotate(180deg); }
#wheel.blue-green { transform: rotate(150deg); }
#wheel.green { transform: rotate(120deg); }
#wheel.yellow-green { transform: rotate(90deg); }
#wheel.yellow { transform: rotate(60deg); }
#wheel.yellow-orange { transform: rotate(30deg); }
#stars { min-width: 400px; }
#stars > path, #stars > g path {
  fill: #666;
}

@media screen and (min-width: 500px) {
  #steps {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #stars { min-width: 460px; }
}
@media screen and (min-width: 1000px) {
  #steps { flex-wrap: no-wrap; }
  #stars { min-width: 350px; }
}

resetWheel();
$('#palette').on('change',function(){
  let sel = $('#palette option:selected').val();
  if(sel === '') {
    $('#color button').attr('disabled','disabled');
    $('#color-p').attr('aria-hidden',true);
  } else {
    $('#color button').removeAttr('disabled');
    $('#color-p').removeAttr('aria-hidden');
  }
  resetWheel();
});
$('button').click(function(){
  pickColor($(this));
}).keyup(function(){
  // enter key and spacebar for keboard users
  if(e.keyCode === 13 || e.keyCode === 31){
    pickColor($(this));  
  }
});
function pickColor(button){
  let sel = $('#palette option:selected').val(), index = $('#wheel g#'+button.attr('label').replace('-','')).index();
  resetWheel();
  $('#color-palette').html(sel+' ');
  $('#wheel').attr('class',button.attr('label'));
  $('#step2').removeAttr('aria-hidden');
  if(sel === 'monochromatic'){
    setSwatch(index,1);
    setSwatch(index,2);
    setSwatch(index,3);
    setSwatch(index,4);
  } else if(sel === 'analogous') {
    setSwatch(index,1);
    setSwatch(index - 1,2);
    setSwatch(index + 1,3);
    setSwatch(index,4);
  } else if (sel === 'complementary'){
    setSwatch(index,1);
    setSwatch(index + 6,2);
    setSwatch(index + 6,3);
    setSwatch(index,4);    
  } else if (sel === 'split complementary'){
    setSwatch(index,1);
    setSwatch(index + 5,2);
    setSwatch(index + 7,3);
    setSwatch(index,4);    
  } else if (sel === 'triadic'){
    setSwatch(index,1);
    setSwatch(index + 4,2);
    setSwatch(index - 4,3);
    setSwatch(index,4);    
  } else if (sel === 'tetradic'){
    setSwatch(index,1);
    setSwatch(index + 3,2);
    setSwatch(index + 6,3);
    setSwatch(index + 9,4);    
  } else if (sel === 'compound'){
    setSwatch(index,1);
    setSwatch(index + 1,2);
    setSwatch(index + 6,3);
    setSwatch(index + 7,4);    
  }
  $('#step3').removeAttr('aria-hidden'); 
}
function setSwatch(index,level){
  index = index < 2 ? index + 12 : index > 13 ? index - 12 : index;
  let shapes = ['small-stars','stripe','large-stars','med-stars'];
  let swatches = ['hue','tint','tone','shade'];
  let shape = shapes[level-1];
  let suffix = shapes[level-1] === 'stripe' ? '': ' path';
  let slice = '#wheel g:nth-child('+(index+1)+')';
  $(slice).removeAttr('aria-hidden');
  $('#'+shape+suffix).css('fill',$(slice+' path:nth-child('+level+')').css('fill'));
  console.log(level,$('#'+shape+'-color'),$('button:nth-child('+(index-1)+')').attr('label'));
  $('#'+shape+'-color').html($('button:nth-child('+(index-1)+')').attr('label')+' '+swatches[level-1]);
}
function resetWheel(){
  $('#step2, #step3, #wheel g').attr('aria-hidden',true);
  $('#stars > path, #stars > g path').css('fill','#666');
}