text: 
  
  export const scaleWheel = {
    template: `
            <svg version="1.1" id="Chromatic-wheel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
               y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
  
            <g id="wheel">
              <g id="colors">
                <g class="segment" data-pitch='0'>
                  <path class="seg" d="M500,88c36,0,71.9,4.7,106.7,14l-35.4,133c-46.7-12.9-96-12.9-142.7,0l-35.4-133
                  C428.1,92.7,464,88,500,88z"/>
                  <path class="letters" d="M506.4,127.2l20.8,55.5h-12.7l-4.2-12.4h-20.8l-4.4,12.4h-12.3l21-55.5H506.4z M507.1,161.2l-7-20.4h-0.2
                  l-7.2,20.4H507.1z"/>
                </g>
                <g class="segment" data-pitch='1'>
                  <path class="seg" d="M706,143.2c31.2,18,60,40,85.5,65.4l-97.2,97.5c-34-34.5-76.7-59.1-123.6-71.3l35.8-132.9
                  C641.4,111.3,674.8,125.2,706,143.2z"/>
                    <path class="letters" d="M655.8,176.6l20.8,55.5h-12.7l-4.2-12.4H639l-4.4,12.4h-12.3l21-55.5H655.8z M656.5,210.7l-7-20.4h-0.2
                      l-7.2,20.4H656.5z"/>
                    <path class="letters" d="M689.8,232.2v-12.8l-7.7,1.6v-7.2l7.7-1.6V200l-7.7,1.6v-7.2l7.7-1.7v-12.1l3.2-0.5v12l8.5-1.9v-13.6
                      l3.3-0.5v13.5l7.8-1.6v7.4l-7.8,1.6v12.1l7.8-1.5v7.2l-7.8,1.6v11.4l-3.3,0.6V217l-8.5,2v12.9L689.8,232.2z M693,211.4l8.5-1.9
                      v-12.1l-8.5,2.1V211.4z"/>
  
                </g>
                <g class="segment" data-pitch='2'>
                  <path class="seg" d="M856.8,294c18.1,31.2,32,64.6,41.3,99.5l-132.9,35.9c-12.2-46.9-36.9-89.6-71.4-123.6l97.5-97.2
                  C816.8,234,838.8,262.8,856.8,294z"/>
                  <path class="letters" d="M800.4,297.5c2.4,0,4.9,0.2,7.2,0.7c2,0.4,3.9,1.2,5.6,2.3c1.6,1.1,2.8,2.5,3.6,4.2c0.9,2.1,1.4,4.3,1.3,6.5
                    c0.1,2.5-0.6,4.9-1.9,7c-1.4,2-3.4,3.6-5.6,4.6c3.1,0.8,5.8,2.6,7.7,5.2c3,4.9,3.3,11,0.9,16.2c-1,2-2.5,3.7-4.4,5s-4,2.3-6.3,2.9
                    c-2.4,0.6-4.8,0.9-7.3,0.9h-26.9v-55.5L800.4,297.5L800.4,297.5z M798.8,320c1.9,0.1,3.8-0.5,5.4-1.6c1.4-1,2.1-2.7,2.1-5
                    c0-1.1-0.2-2.2-0.7-3.2c-0.4-0.8-1.1-1.5-1.9-1.9c-0.8-0.5-1.7-0.8-2.7-1s-2.1-0.3-3.2-0.3h-11.4v13H798.8z M799.5,343.6
                    c1.1,0,2.3-0.1,3.4-0.4c1-0.2,2-0.6,2.9-1.2c0.8-0.6,1.5-1.3,2-2.2c0.5-1.1,0.8-2.3,0.7-3.6c0-2.9-0.8-4.9-2.4-6.1
                    c-1.9-1.3-4.1-1.9-6.4-1.8h-13.3v15.2L799.5,343.6z"/>
                </g>
                <g class="segment" data-pitch='3'>
                  <path class="seg" d="M912,500c0,36-4.7,71.9-14,106.8l-133-35.4c12.9-46.7,12.9-96,0-142.7l133-35.4
                  C907.3,428.1,912,464,912,500z"/>
                  <path class="letters" d="M850.7,487.1c-0.7-1.2-1.6-2.2-2.7-3.1c-1.1-0.9-2.4-1.6-3.7-2.1c-1.4-0.5-2.8-0.7-4.3-0.7
                    c-2.4-0.1-4.8,0.5-7,1.6c-1.9,1-3.5,2.5-4.7,4.3c-1.2,1.9-2.1,3.9-2.6,6.1c-0.6,2.3-0.8,4.7-0.8,7.1c0,2.3,0.3,4.6,0.8,6.8
                    c0.5,2.1,1.4,4.2,2.6,6c1.2,1.8,2.8,3.2,4.7,4.2c2.2,1.1,4.6,1.7,7,1.6c3.7,0,6.6-1.1,8.8-3.4c2.2-2.5,3.6-5.7,3.8-9h11.8
                    c-0.3,3.3-1.1,6.4-2.4,9.4c-1.2,2.7-3,5.1-5.1,7.1c-2.2,2-4.7,3.5-7.5,4.5c-3,1.1-6.2,1.6-9.4,1.6c-3.9,0.1-7.8-0.7-11.5-2.2
                    c-3.3-1.4-6.2-3.5-8.6-6.1c-2.4-2.7-4.2-5.8-5.4-9.1c-1.3-3.6-1.9-7.5-1.9-11.3c0-3.9,0.6-7.8,1.9-11.5c1.2-3.4,3-6.6,5.4-9.3
                    c2.4-2.7,5.3-4.8,8.6-6.2c6.4-2.6,13.5-3,20.1-0.9c2.6,0.8,5.1,2.1,7.3,3.9c2.2,1.7,4,3.8,5.3,6.3c1.4,2.6,2.3,5.6,2.6,8.5H852
                    C851.8,489.6,851.4,488.3,850.7,487.1z"/>
                </g>
                <g class="segment" data-pitch='4'>
                  <path  class="seg" d="M856.8,706c-18,31.2-40,60-65.5,85.5l-97.5-97.2c34.5-34,59.2-76.7,71.3-123.6L898,606.6
                  C888.7,641.4,874.8,674.8,856.8,706z"/>
  
                    <path class="letters" d="M788.8,658.3c-0.7-1.2-1.6-2.2-2.7-3.1c-1.1-0.9-2.4-1.6-3.7-2.1c-1.4-0.5-2.8-0.7-4.3-0.7
                      c-2.4-0.1-4.8,0.5-7,1.6c-1.9,1-3.5,2.5-4.7,4.3c-1.2,1.9-2.1,3.9-2.6,6.1c-0.6,2.3-0.8,4.7-0.8,7.1c0,2.3,0.3,4.6,0.8,6.8
                      c0.5,2.1,1.4,4.2,2.6,6c1.2,1.8,2.8,3.2,4.7,4.2c2.2,1.1,4.6,1.7,7,1.6c3.7,0,6.6-1.1,8.8-3.4c2.2-2.5,3.6-5.7,3.8-9h11.8
                      c-0.3,3.3-1.1,6.4-2.4,9.4c-1.2,2.7-3,5.1-5.1,7.2c-2.2,2-4.7,3.5-7.5,4.5c-3,1.1-6.2,1.6-9.4,1.6c-3.9,0.1-7.8-0.7-11.5-2.2
                      c-3.3-1.4-6.2-3.5-8.6-6.2c-2.4-2.7-4.2-5.8-5.4-9.1c-1.3-3.6-1.9-7.5-1.9-11.3c0-3.9,0.6-7.8,1.9-11.5c1.2-3.4,3-6.6,5.4-9.3
                      s5.3-4.8,8.6-6.2c6.4-2.6,13.5-3,20.1-0.9c2.6,0.8,5.1,2.1,7.3,3.8s4,3.8,5.3,6.3c1.4,2.6,2.3,5.6,2.6,8.5h-11.8
                      C790,660.8,789.5,659.5,788.8,658.3z"/>
                    <path class="letters" d="M819.2,699v-12.7l-7.7,1.5v-7.2l7.7-1.5V667l-7.7,1.6v-7.2l7.7-1.7v-12.1l3.2-0.5v12l8.6-1.9v-13.6l3.3-0.5
                      v13.5l7.8-1.6v7.3l-7.8,1.5v12l7.8-1.5v7.2l-7.8,1.7v11.4L831,695v-11.3l-8.5,2v12.8L819.2,699z M822.4,678.2l8.6-1.9v-12.1
                      l-8.5,2.1L822.4,678.2z"/>
  
                </g>
                <g class="segment" data-pitch='5'>
                  <path class="seg" d="M706,856.8c-31.2,18.1-64.6,31.9-99.4,41.3l-35.8-132.9c46.9-12.2,89.6-36.8,123.6-71.3l97.2,97.5
                  C766,816.8,737.2,838.8,706,856.8z"/>
                  <path class="letters" d="M676,768.2c3.4,0,6.8,0.5,10,1.7c3,1.1,5.7,2.8,8,5.1c2.4,2.4,4.2,5.4,5.3,8.5c1.3,3.9,2,8,1.9,12.1
                    c0,3.8-0.5,7.6-1.5,11.2c-0.9,3.2-2.5,6.3-4.7,8.9c-2.1,2.5-4.8,4.5-7.8,5.9c-3.5,1.5-7.3,2.2-11.1,2.1h-24v-55.5H676z
                     M675.1,813.5c1.7,0,3.5-0.3,5.1-0.8c1.7-0.6,3.2-1.6,4.4-2.8c1.4-1.5,2.5-3.2,3.1-5.2c0.8-2.5,1.2-5.1,1.2-7.8
                    c0-2.6-0.2-5.1-0.8-7.6c-0.5-2.1-1.4-4.1-2.7-5.8c-1.3-1.6-3-2.9-4.9-3.7c-2.4-0.9-5-1.4-7.6-1.3h-8.7v35L675.1,813.5z"/>
  
                </g>
                <g class="segment" data-pitch='6'>
                  <path class="seg" d="M500,912c-36,0-71.9-4.7-106.7-14l35.4-133c46.7,12.9,96,12.9,142.7,0l35.4,133
                  C571.9,907.3,536,912,500,912z"/>
  
                    <path class="letters" d="M486.6,811.1c3.4,0,6.8,0.5,10,1.7c3,1.1,5.7,2.8,8,5.1c2.4,2.4,4.2,5.4,5.3,8.5c1.3,3.9,2,8,1.9,12.1
                      c0,3.8-0.5,7.6-1.5,11.2c-0.9,3.2-2.5,6.3-4.7,8.9c-2.1,2.5-4.8,4.5-7.9,5.9c-3.5,1.5-7.3,2.2-11.1,2.1h-24v-55.5H486.6z
                       M485.8,856.3c1.7,0,3.5-0.3,5.1-0.8c1.7-0.6,3.2-1.6,4.4-2.8c1.4-1.5,2.5-3.2,3.1-5.2c0.8-2.5,1.2-5.1,1.2-7.8
                      c0-2.6-0.2-5.1-0.8-7.6c-0.5-2.1-1.4-4.1-2.7-5.8c-1.3-1.6-3-2.9-4.9-3.7c-2.4-0.9-5-1.4-7.6-1.3h-8.7v35L485.8,856.3z"/>
                    <path class="letters" d="M528.7,866.6v-12.8l-7.7,1.6v-7.2l7.7-1.5v-12.1L521,836v-7.2l7.7-1.7V815l3.2-0.5v12l8.5-1.9V811l3.3-0.5
                      V824l7.8-1.6v7.4l-7.8,1.5v12l7.8-1.5v7.3l-7.8,1.6V862l-3.3,0.6v-11.3l-8.5,2v12.8L528.7,866.6z M531.9,845.8l8.5-1.9v-12.1
                      l-8.5,2.1V845.8z"/>
  
                </g>
                <g class="segment" data-pitch='7'>
                  <path  class="seg" d="M294,856.8c-31.2-18-60-40-85.5-65.4l97.2-97.5c34,34.5,76.7,59.1,123.6,71.3l-35.8,132.9
                  C358.6,888.7,325.2,874.8,294,856.8z"/>
                  <path class="letters" d="M349.3,763.7V774H320v11.9h26.9v9.5H320V809h29.9v10.3h-42.1v-55.6H349.3z"/>
  
                </g>
                <g class="segment" data-pitch='8'>
                  <path class="seg" d="M143.2,706c-18.1-31.2-31.9-64.6-41.3-99.4l132.9-35.8c12.2,46.9,36.9,89.6,71.4,123.6l-97.5,97.2
                  C183.2,766,161.2,737.2,143.2,706z"/>
                  <path class="letters" d="M228.1,643.2v10.3h-26.8v12.8h23.2v9.5h-23.2v22.9H189v-55.5H228.1z"/>
  
                </g>
                <g  class="segment" data-pitch='9'>
                  <path class="seg" d="M88,500c0-36,4.7-71.9,14-106.7l133,35.4c-12.9,46.7-12.9,96,0,142.7l-133,35.4
                  C92.7,571.9,88,536,88,500z"/>
  
                    <path class="letters" d="M161.9,472.6v10.3h-26.8v12.8h23.2v9.5h-23.2v22.9h-12.2v-55.5L161.9,472.6L161.9,472.6z"/>
                    <path class="letters" d="M177.4,528.1v-12.8l-7.7,1.5v-7.2l7.7-1.5V496l-7.7,1.6v-7.3l7.7-1.7v-12.1l3.2-0.5v12l8.6-1.9v-13.6
                      l3.3-0.5v13.5l7.8-1.6v7.4l-7.8,1.5v12l7.8-1.5v7.2l-7.8,1.6v11.4l-3.3,0.6v-11.3l-8.6,2v12.8L177.4,528.1z M180.6,507.3l8.6-1.9
                      v-12.1l-8.6,2.1V507.3z"/>
  
                </g>
                <g class="segment" data-pitch='10'>
                  <path class="seg" d="M143.2,294c18-31.2,40-60,65.4-85.5l97.5,97.2c-34.5,34-59.1,76.7-71.3,123.6l-132.9-35.9
                  C111.3,358.6,125.2,325.2,143.2,294z"/>
                  <path class="letters" d="M203.4,358.5c-2.5,1.1-5.2,1.7-8,1.7c-3.9,0.1-7.8-0.7-11.5-2.2c-3.3-1.4-6.2-3.5-8.6-6.1
                    c-2.4-2.7-4.2-5.8-5.4-9.1c-1.3-3.6-1.9-7.5-1.9-11.3c0-3.9,0.6-7.8,1.9-11.6c1.2-3.4,3-6.6,5.4-9.3c2.4-2.7,5.3-4.8,8.6-6.2
                    c3.6-1.6,7.5-2.3,11.5-2.3c2.8,0,5.6,0.4,8.3,1.3c2.6,0.8,5.1,2.1,7.2,3.8c4.6,3.5,7.4,8.8,7.9,14.5h-11.7c-0.5-2.8-2-5.2-4.2-7
                    c-2.2-1.6-4.8-2.4-7.6-2.3c-2.4-0.1-4.8,0.5-7,1.6c-1.9,1-3.5,2.5-4.7,4.3c-1.2,1.9-2.1,3.9-2.6,6.1c-0.6,2.3-0.8,4.7-0.8,7.1
                    c0,2.3,0.3,4.6,0.8,6.8c0.5,2.1,1.4,4.2,2.6,6c1.2,1.8,2.8,3.2,4.7,4.2c2.2,1.1,4.6,1.7,7,1.6c4,0,7.2-1,9.4-3.1
                    c2.2-2,3.5-5,3.9-8.9h-12.3V329h23.3v30h-7.8l-1.2-6.3C208.8,355.2,206.3,357.2,203.4,358.5z"/>
  
                </g>
                <g  class="segment" data-pitch='11'>
                  <path  class="seg" d="M294,143.2c31.2-18.1,64.6-31.9,99.4-41.3l35.9,132.9c-46.9,12.2-89.6,36.8-123.6,71.3
                  l-97.2-97.5C234,183.2,262.8,161.2,294,143.2z"/>
  
  
                    <path class="letters" d="M320.4,227.9c-2.5,1.1-5.2,1.7-8,1.7c-3.9,0.1-7.8-0.7-11.5-2.2c-3.3-1.4-6.2-3.5-8.6-6.1
                      c-2.4-2.7-4.2-5.8-5.4-9.1c-1.3-3.6-1.9-7.5-1.9-11.3c0-3.9,0.6-7.8,1.9-11.6c1.2-3.4,3-6.6,5.4-9.3s5.3-4.8,8.6-6.2
                      c3.6-1.6,7.5-2.3,11.5-2.3c2.8,0,5.6,0.4,8.3,1.3c2.6,0.8,5.1,2.1,7.2,3.8c4.6,3.5,7.4,8.8,7.9,14.6h-11.6c-0.5-2.8-2-5.2-4.2-7
                      c-2.2-1.6-4.8-2.4-7.5-2.3c-2.4-0.1-4.8,0.5-7,1.6c-1.9,1-3.5,2.5-4.7,4.3c-1.2,1.9-2.1,3.9-2.6,6.1c-0.6,2.3-0.8,4.7-0.8,7.1
                      c0,2.3,0.3,4.6,0.8,6.8c0.5,2.1,1.4,4.1,2.6,5.9c1.2,1.8,2.8,3.2,4.7,4.2c2.2,1.1,4.6,1.7,7,1.6c4,0,7.2-1,9.4-3.1
                      c2.2-2,3.5-5,3.9-8.9h-12.3v-9.1h23.3v30H329l-1.2-6.3C325.7,224.5,323.2,226.6,320.4,227.9z"/>
                    <path class="letters" d="M354.9,228.3v-12.8l-7.7,1.6v-7.2l7.7-1.6v-12.1l-7.7,1.6v-7.2l7.7-1.7v-12.1l3.2-0.5v12.1l8.5-1.9v-13.6
                      l3.3-0.5v13.5l7.8-1.6v7.4l-7.8,1.6v12l7.8-1.5v7.2l-7.8,1.6V224l-3.3,0.6V213l-8.5,2v12.8L354.9,228.3z M358.1,207.6l8.5-1.9
                      v-12.1l-8.5,2.1V207.6z"/>
  
                </g>
              </g>
  
            </g>
            <g id="mask">
              <g id="steps">
                <path id="step11" class="masked" d="M293.7,143.4c31.2-18.1,64.6-32,99.4-41.4l36,132.9c-46.9,12.2-89.6,36.9-123.6,71.5L208.3,209
                  C233.8,183.4,262.5,161.4,293.7,143.4z"/>
                <path id="step10" class="masked" d="M143.1,294.3c18-31.2,40-60,65.4-85.5l97.6,97.1c-34.5,34-59.1,76.7-71.2,123.6L102,393.7
                  C111.2,358.9,125,325.5,143.1,294.3z"/>
                <path id="step9" class="masked" d="M88,500.3c-0.1-36,4.6-71.9,13.9-106.8L235,428.9c-12.8,46.7-12.8,96,0.1,142.7l-133,35.5
                  C92.8,572.2,88,536.4,88,500.3z"/>
                <path id="step8" class="masked" d="M143.4,706.3c-18.1-31.2-32-64.6-41.4-99.4L234.9,571c12.2,46.9,36.9,89.5,71.4,123.5l-97.4,97.2
                  C183.4,766.2,161.4,737.5,143.4,706.3z"/>
                <path id="step7" class="masked" d="M294.3,856.9c-31.2-18-60-40-85.5-65.4l97.1-97.5c34,34.5,76.7,59.1,123.6,71.2l-35.8,132.9
                  C358.9,888.8,325.5,875,294.3,856.9L294.3,856.9z"/>
                <path id="step6" class="masked" d="M500.3,912c-36,0.1-71.9-4.6-106.8-13.9L428.8,765c46.7,12.8,96,12.8,142.7-0.1l35.5,133
                  C572.2,907.2,536.3,912,500.3,912z"/>
                <path id="step5" class="masked" d="M706.2,856.6c-31.2,18.1-64.6,32-99.4,41.4l-36-132.9c46.9-12.2,89.6-36.9,123.5-71.5l97.2,97.4
                  C766.2,816.6,737.4,838.6,706.2,856.6z"/>
                <path id="step4" class="masked" d="M856.9,705.7c-18,31.2-39.9,60-65.4,85.5L694,694.1c34.5-34,59.1-76.7,71.2-123.6l132.9,35.8
                  C888.8,641.1,875,674.5,856.9,705.7z"/>
                <path id="step3" class="masked" d="M912,499.7c0.1,36-4.6,71.9-13.9,106.8L765,571.2c12.8-46.7,12.8-96-0.1-142.7L898,393
                  C907.3,427.8,912,463.7,912,499.7L912,499.7z"/>
                <path id="step2" class="masked" d="M856.6,293.8c18.1,31.2,32,64.6,41.4,99.4l-132.9,36c-12.2-46.9-36.9-89.5-71.4-123.5l97.4-97.2
                  C816.6,233.8,838.6,262.5,856.6,293.8z"/>
                <path id="step1" class="masked" d="M705.7,143.1c31.2,18,60,40,85.5,65.4l-97,97.5c-34-34.5-76.7-59.1-123.6-71.2l35.8-132.9
                  C641.1,111.1,674.5,125,705.7,143.1L705.7,143.1z"/>
                <path id="step0" class="masked" d="M499.7,88c36,0,71.9,4.6,106.8,13.9L571.2,235c-46.7-12.8-96-12.8-142.7,0.1l-35.5-133
                  C427.8,92.8,463.7,88,499.7,88z"/>
              </g>
              <path id="grip" class="st15" d="M11,500c0,270.1,218.9,489,489,489s489-218.9,489-489S770.1,11,500,11S11,229.9,11,500z M911.4,500
                c0,227.2-184.2,411.4-411.4,411.4S88.6,727.2,88.6,500c0-218.2,169.9-396.8,384.7-410.5C482.1,88.9,500,88,500,88
                s16.5,0.8,24.7,1.3C740.4,102.1,911.4,281.1,911.4,500z"/>
              <g id="arrow">
                <path class="st15" d="M511.5,84l-10.9,18.8L489.7,84H511.5 M526.2,75.5H475l7.4,12.8l10.9,18.8l7.4,12.8l7.4-12.8L519,88.3
                  L526.2,75.5L526.2,75.5z"/>
              </g>
              <g id="grips">
                <path class="st16" d="M18.3,473l-0.2,3.3l64,3.4c0.1-1.1,0.1-2.2,0.2-3.3L18.3,473z"/>
                <path class="st16" d="M982.3,526.9c0.1-1.1,0.1-2.2,0.2-3.3l-64.7-3.4c-0.1,1.1-0.1,2.2-0.2,3.3L982.3,526.9z"/>
                <path class="st16" d="M980.3,552.1c0.1-1.1,0.2-2.2,0.3-3.3l-64.4-6.8c-0.1,1.1-0.2,2.2-0.3,3.3L980.3,552.1z"/>
                <path class="st16" d="M20.4,447.9l-0.4,3.3l63.8,6.7c0.1-1.1,0.2-2.2,0.3-3.3L20.4,447.9z"/>
                <path class="st16" d="M976.9,577.1c0.2-1.1,0.4-2.2,0.5-3.3l-64-10.1c-0.2,1.1-0.3,2.2-0.5,3.3L976.9,577.1z"/>
                <path class="st16" d="M23.8,422.8l-0.5,3.3l63.3,10c0.2-1.1,0.3-2.2,0.5-3.3L23.8,422.8z"/>
                <path class="st16" d="M972.3,602c0.2-1.1,0.5-2.2,0.7-3.3l-63.3-13.5c-0.2,1.1-0.5,2.2-0.7,3.3L972.3,602z"/>
                <path class="st16" d="M28.5,397.9l-0.7,3.3l62.7,13.3c0.2-1.1,0.5-2.2,0.7-3.3L28.5,397.9z"/>
                <path class="st16" d="M34.5,373.4l-0.9,3.2l61.9,16.6c0.3-1.1,0.6-2.2,0.9-3.2L34.5,373.4z"/>
                <path class="st16" d="M966.3,626.5c0.3-1.1,0.6-2.2,0.8-3.2l-62.5-16.8c-0.3,1.1-0.6,2.2-0.9,3.2L966.3,626.5z"/>
                <path class="st16" d="M959.1,650.7c0.3-1.1,0.7-2.1,1-3.2l-61.6-20c-0.3,1.1-0.7,2.1-1,3.2L959.1,650.7z"/>
                <path class="st16" d="M41.7,349.1l-1,3.2l60.9,19.8c0.3-1.1,0.7-2.1,1-3.2L41.7,349.1z"/>
                <path class="st16" d="M50.2,325.3l-1.2,3.1l59.8,23c0.4-1,0.8-2.1,1.2-3.1L50.2,325.3z"/>
                <path class="st16" d="M950.5,674.5c0.4-1,0.8-2.1,1.2-3.1l-60.5-23.2c-0.4,1-0.8,2.1-1.2,3.1L950.5,674.5z"/>
                <path class="st16" d="M940.8,697.8c0.5-1,0.9-2,1.4-3.1L883,668.4c-0.4,1-0.9,2-1.4,3.1L940.8,697.8z"/>
                <path class="st16" d="M60,302l-1.4,3l58.5,26.1c0.4-1,0.9-2,1.4-3.1L60,302z"/>
                <path class="st16" d="M71,279.2l-1.5,3l57.1,29.1l1.5-3L71,279.2z"/>
                <path class="st16" d="M929.8,720.6c0.5-1,1-2,1.5-3l-57.7-29.4l-1.5,3L929.8,720.6z"/>
                <path class="st16" d="M917.7,742.7c0.6-1,1.1-1.9,1.7-2.9l-56.1-32.4c-0.6,1-1.1,1.9-1.7,2.9L917.7,742.7z"/>
                <path class="st16" d="M83.1,257l-1.7,2.9L137,292c0.6-1,1.1-1.9,1.7-2.9L83.1,257z"/>
                <path class="st16" d="M96.4,235.5l-1.8,2.8l53.8,35c0.6-0.9,1.2-1.9,1.8-2.8L96.4,235.5z"/>
                <path class="st16" d="M904.4,764.2l1.8-2.8l-54.3-35.3l-1.8,2.8L904.4,764.2z"/>
                <path class="st16" d="M110.8,214.7l-2,2.7l52,37.7l2-2.7L110.8,214.7z"/>
                <path class="st16" d="M890,785l2-2.7l-52.4-38l-2,2.7L890,785z"/>
                <path class="st16" d="M126.3,194.7l-2.1,2.6l49.9,40.4c0.7-0.9,1.4-1.7,2.1-2.6L126.3,194.7z"/>
                <path class="st16" d="M874.6,805l2.1-2.6l-50.3-40.7l-2.1,2.6L874.6,805z"/>
                <path class="st16" d="M858.1,824.2l2.2-2.5l-48.1-43.3l-2.2,2.5L858.1,824.2z"/>
                <path class="st16" d="M142.8,175.6l-2.2,2.4l47.8,43l2.2-2.5L142.8,175.6z"/>
                <path class="st16" d="M794.9,796.7l45.8,45.8l2.4-2.4l-45.8-45.8L794.9,796.7z"/>
                <path class="st16" d="M205.7,202.7l-45.5-45.5l-2.4,2.4l45.5,45.5L205.7,202.7z"/>
                <path class="st16" d="M822.3,859.8l2.5-2.2l-43.3-48.1l-2.5,2.2L822.3,859.8z"/>
                <path class="st16" d="M178.6,139.9l-2.5,2.2l43,47.8l2.5-2.2L178.6,139.9z"/>
                <path class="st16" d="M803.1,876.2l2.6-2.1L765,823.8l-2.6,2.1L803.1,876.2z"/>
                <path class="st16" d="M197.9,123.6l-2.6,2.1l40.5,50l2.6-2.1L197.9,123.6z"/>
                <path class="st16" d="M218,108.2l-2.7,2l37.8,52.1l2.7-2L218,108.2z"/>
                <path class="st16" d="M783,891.5l2.7-2l-38-52.4l-2.7,2L783,891.5z"/>
                <path class="st16" d="M238.9,94l-2.8,1.8l35,54l2.9-1.8L238.9,94z"/>
                <path class="st16" d="M762.1,905.8l2.8-1.8l-35.3-54.3l-2.8,1.8L762.1,905.8z"/>
                <path class="st16" d="M740.6,919l2.9-1.7l-32.4-56.1l-2.9,1.7L740.6,919z"/>
                <path class="st16" d="M260.5,80.8l-2.9,1.7l32.2,55.7l2.9-1.7L260.5,80.8z"/>
                <path class="st16" d="M718.3,931l3-1.5l-29.4-57.7l-3,1.5L718.3,931z"/>
                <path class="st16" d="M282.8,68.9l-3,1.5l29.2,57.3l3-1.5L282.8,68.9z"/>
                <path class="st16" d="M305.7,58l-3,1.4l26.2,58.8l3.1-1.4L305.7,58z"/>
                <path class="st16" d="M695.5,941.8l3.1-1.4l-26.3-59.2l-3.1,1.4L695.5,941.8z"/>
                <path class="st16" d="M672.1,951.5l3.1-1.2L652,889.8l-3.1,1.2L672.1,951.5z"/>
                <path class="st16" d="M329.1,48.5l-3.1,1.2l23.1,60.1l3.1-1.2L329.1,48.5z"/>
                <path class="st16" d="M648.3,959.8l3.2-1l-20-61.6l-3.2,1L648.3,959.8z"/>
                <path class="st16" d="M352.9,40.1l-3.2,1l19.9,61.3l3.2-1L352.9,40.1z"/>
                <path class="st16" d="M377.2,33l-3.2,0.9l16.7,62.3l3.2-0.8L377.2,33z"/>
                <path class="st16" d="M624,967l3.2-0.9l-16.8-62.5l-3.2,0.9L624,967z"/>
                <path class="st16" d="M401.8,27.2l-3.3,0.7L412,91l3.3-0.7L401.8,27.2z"/>
                <path class="st16" d="M599.4,972.8l3.3-0.7l-13.5-63.3l-3.3,0.7L599.4,972.8z"/>
                <path class="st16" d="M426.7,22.6l-3.3,0.5L433.5,87l3.3-0.5L426.7,22.6z"/>
                <path class="st16" d="M574.5,977.3l3.3-0.5l-10.1-63.9l-3.3,0.5L574.5,977.3z"/>
                <path class="st16" d="M451.8,19.4l-3.3,0.4l6.8,64.3l3.3-0.3L451.8,19.4z"/>
                <path class="st16" d="M549.4,980.5l3.3-0.4l-6.8-64.4l-3.3,0.4L549.4,980.5z"/>
                <path class="st16" d="M477,17.5l-3.3,0.2l3.3,64.6l3.3-0.2L477,17.5z"/>
                <path class="st16" d="M524.2,982.4l3.3-0.2l-3.4-64.6l-3.3,0.2L524.2,982.4z"/>
                <path class="st16" d="M502.3,82.3V17h-3.4v65.3H502.3L502.3,82.3z"/>
                <path class="st16" d="M498.9,918.3V983h3.3v-64.7H498.9L498.9,918.3z"/>
                <path class="st16" d="M473.6,982.3l3.3,0.2l3.4-64.6l-3.3-0.2L473.6,982.3z"/>
                <path class="st16" d="M527.5,17.8l-3.3-0.2l-3.4,64.6l3.3,0.2L527.5,17.8z"/>
                <path class="st16" d="M552.8,19.8l-3.3-0.4l-6.8,64.4l3.3,0.4L552.8,19.8z"/>
                <path class="st16" d="M448.5,980.2l3.3,0.3l6.8-64.3l-3.3-0.3L448.5,980.2z"/>
                <path class="st16" d="M423.4,976.8l3.3,0.5l10.1-63.8l-3.3-0.5L423.4,976.8z"/>
                <path class="st16" d="M577.8,23.2l-3.3-0.5l-10.1,63.9l3.3,0.5L577.8,23.2z"/>
                <path class="st16" d="M398.5,972.1l3.3,0.7l13.4-63.1L412,909L398.5,972.1z"/>
                <path class="st16" d="M602.7,27.9l-3.3-0.7l-13.5,63.3l3.3,0.7L602.7,27.9z"/>
                <path class="st16" d="M627.2,33.9L624,33l-16.8,62.6l3.2,0.9L627.2,33.9z"/>
                <path class="st16" d="M374,966.1l3.2,0.9l16.7-62.3l-3.2-0.8L374,966.1z"/>
                <path class="st16" d="M651.4,41.2l-3.2-1l-20,61.6l3.2,1L651.4,41.2z"/>
                <path class="st16" d="M349.8,958.9l3.2,1l19.9-61.3l-3.2-1L349.8,958.9z"/>
                <path class="st16" d="M325.9,950.3l3.1,1.2l23.1-60.1l-3.1-1.2L325.9,950.3z"/>
                <path class="st16" d="M675.2,49.7l-3.1-1.2L648.9,109l3.1,1.2L675.2,49.7z"/>
                <path class="st16" d="M302.6,940.6l3,1.4l26.2-58.8l-3.1-1.4L302.6,940.6z"/>
                <path class="st16" d="M698.5,59.5l-3.1-1.4l-26.3,59.1l3,1.4L698.5,59.5z"/>
                <path class="st16" d="M721.3,70.5l-3-1.5l-29.4,57.7l3,1.5L721.3,70.5z"/>
                <path class="st16" d="M279.8,929.6l3,1.5l29.2-57.4l-3-1.5L279.8,929.6z"/>
                <path class="st16" d="M743.5,82.7l-2.9-1.7l-32.4,56.1l2.9,1.7L743.5,82.7z"/>
                <path class="st16" d="M257.6,917.5l2.9,1.7l32.2-55.7l-2.9-1.7L257.6,917.5z"/>
                <path class="st16" d="M236.1,904.2l2.8,1.8l35-54l-2.8-1.8L236.1,904.2z"/>
                <path class="st16" d="M764.9,96l-2.8-1.8l-35.3,54.3l2.8,1.8L764.9,96z"/>
                <path class="st16" d="M215.3,889.8l2.7,2l37.8-52.1l-2.7-2L215.3,889.8z"/>
                <path class="st16" d="M785.7,110.5l-2.7-2l-38,52.4l2.7,2L785.7,110.5z"/>
                <path class="st16" d="M805.7,126l-2.6-2.1l-40.7,50.3l2.6,2.1L805.7,126z"/>
                <path class="st16" d="M195.3,874.3l2.6,2.1l40.5-50l-2.6-2.1L195.3,874.3z"/>
                <path class="st16" d="M176.1,857.8l2.5,2.2l43-47.8l-2.4-2.3L176.1,857.8z"/>
                <path class="st16" d="M824.8,142.4l-2.5-2.2L779,188.3l2.5,2.2L824.8,142.4z"/>
                <path class="st16" d="M203.3,794.9l-45.5,45.5l2.4,2.4l45.5-45.5L203.3,794.9z"/>
                <path class="st16" d="M797.3,205.7l45.7-45.8l-2.4-2.4l-45.7,45.8L797.3,205.7z"/>
                <path class="st16" d="M140.5,822l2.2,2.5l47.8-43l-2.2-2.5L140.5,822z"/>
                <path class="st16" d="M860.3,178.3l-2.2-2.5L810,219.2l2.2,2.5L860.3,178.3z"/>
                <path class="st16" d="M876.7,197.6l-2.1-2.6l-50.3,40.7l2.1,2.6L876.7,197.6z"/>
                <path class="st16" d="M124.2,802.7l2.1,2.6l49.9-40.4c-0.7-0.9-1.4-1.7-2.1-2.6L124.2,802.7z"/>
                <path class="st16" d="M108.8,782.6l2,2.7l52-37.8l-2-2.7L108.8,782.6z"/>
                <path class="st16" d="M892,217.7l-2-2.7l-52.3,38l2,2.7L892,217.7z"/>
                <path class="st16" d="M906.2,238.6l-1.8-2.8L850.1,271l1.8,2.8L906.2,238.6z"/>
                <path class="st16" d="M94.6,761.7l1.8,2.8l53.8-35l-1.8-2.8L94.6,761.7z"/>
                <path class="st16" d="M919.4,260.1c-0.5-1-1.1-1.9-1.7-2.9l-56.1,32.4l1.7,2.9L919.4,260.1z"/>
                <path class="st16" d="M81.4,740.1l1.7,2.9l55.6-32.1c-0.6-1-1.1-1.9-1.7-2.9L81.4,740.1z"/>
                <path class="st16" d="M931.4,282.4c-0.5-1-1-2-1.5-3l-57.7,29.4l1.5,3L931.4,282.4z"/>
                <path class="st16" d="M69.5,717.8l1.5,3l57.1-29.1c-0.5-1-1-2-1.5-3L69.5,717.8z"/>
                <path class="st16" d="M942.2,305.2c-0.4-1-0.9-2-1.4-3.1l-59.2,26.3c0.5,1,0.9,2,1.4,3.1L942.2,305.2z"/>
                <path class="st16" d="M58.7,694.9L60,698l58.5-26.1c-0.5-1-0.9-2-1.4-3.1L58.7,694.9z"/>
                <path class="st16" d="M951.8,328.6c-0.4-1-0.8-2.1-1.2-3.1l-60.5,23.2c0.4,1,0.8,2.1,1.2,3.1L951.8,328.6z"/>
                <path class="st16" d="M49,671.5l1.2,3.1l59.8-23c-0.4-1-0.8-2.1-1.2-3.1L49,671.5z"/>
                <path class="st16" d="M960.1,352.5c-0.3-1.1-0.7-2.1-1-3.2l-61.6,20c0.3,1.1,0.7,2.1,1,3.2L960.1,352.5z"/>
                <path class="st16" d="M40.7,647.7l1,3.2l60.9-19.8c-0.3-1.1-0.7-2.1-1-3.2L40.7,647.7z"/>
                <path class="st16" d="M33.6,623.4l0.9,3.2L96.3,610c-0.3-1.1-0.6-2.2-0.9-3.2L33.6,623.4z"/>
                <path class="st16" d="M967.2,376.7c-0.3-1.1-0.6-2.2-0.8-3.2l-62.5,16.8l0.9,3.2L967.2,376.7z"/>
                <path class="st16" d="M973,401.3c-0.2-1.1-0.5-2.2-0.7-3.3l-63.4,13.5c0.2,1.1,0.5,2.2,0.7,3.3L973,401.3z"/>
                <path class="st16" d="M27.8,598.8l0.7,3.3l62.7-13.3c-0.2-1.1-0.5-2.2-0.7-3.3L27.8,598.8z"/>
                <path class="st16" d="M23.2,573.9l0.5,3.3l63.3-10c-0.2-1.1-0.4-2.2-0.5-3.3L23.2,573.9z"/>
                <path class="st16" d="M977.4,426.2c-0.2-1.1-0.3-2.2-0.5-3.3L913,433c0.2,1.1,0.4,2.2,0.5,3.3L977.4,426.2z"/>
                <path class="st16" d="M20,548.8l0.4,3.3l63.8-6.7c-0.1-1.1-0.2-2.2-0.3-3.3L20,548.8z"/>
                <path class="st16" d="M980.6,451.2c-0.1-1.1-0.2-2.2-0.3-3.3l-64.4,6.8c0.1,1.1,0.2,2.2,0.3,3.3L980.6,451.2z"/>
                <path class="st16" d="M982.5,476.4c-0.1-1.1-0.1-2.2-0.2-3.3l-64.7,3.4c0.1,1.1,0.1,2.2,0.2,3.3L982.5,476.4z"/>
                <path class="st16" d="M18.1,523.6l0.2,3.3l64-3.4c-0.1-1.1-0.1-2.2-0.2-3.3L18.1,523.6z"/>
                <path class="st16" d="M81.7,498.3H17.6v3.3h64.1V498.3z"/>
                <path class="st16" d="M918.3,501.7h65.9v-3.3h-65.9v1.7C918.3,500.6,918.3,501.1,918.3,501.7z"/>
              </g>
              <g id="marker">
                <path class="letters" d="M500.6,72.9c-12.9,0-23.3-10.5-23.3-23.3s10.5-23.3,23.3-23.3c12.8,0,23.3,10.5,23.3,23.3
                  S513.5,72.8,500.6,72.9L500.6,72.9z"/>
                <path class="st15" d="M500.6,29.6c11.2,0.4,19.9,9.8,19.5,20.9c-0.4,10.6-8.8,19-19.4,19.5h-0.1c-11.2,0-20.2-9-20.3-20.2
                  C480.3,38.6,489.4,29.6,500.6,29.6L500.6,29.6 M500.6,23.9L500.6,23.9c-14.4,0-26,11.6-25.9,25.9s11.6,25.9,25.9,25.8l0,0h0.1
                  c14.3,0,25.9-11.6,25.8-25.9C526.5,35.4,514.9,23.9,500.6,23.9z"/>
              </g>
              <circle id="center" class="st12" cx="500" cy="500" r="274"/>
              <path id="round-frame" class="st17" d="M500,86c36,0,71.9,4.7,106.7,14l-35.4,133c-46.7-12.9-96-12.9-142.7,0l-35.4-133
                C428.1,90.7,464,86,500,86z"/>
              <g id="chords" text-anchor="middle">
                <text id="chord11" transform="matrix(-0.866 0.5 -0.5 -0.866 382.6802 281.8721)" class="st18 st19 st20">-</text>
                <text id="chord10" transform="matrix(-0.5 0.866 -0.866 -0.5 289.335 369.7558)" class="st18 st19 st20">-</text>
                <text id="chord9" transform="matrix(6.123234e-17 1 -1 6.123234e-17 252.4375 492.5366)" class="st18 st19 st20">-</text>
                <text id="chord8" transform="matrix(0.5 0.866 -0.866 0.5 281.873 617.3179)" class="st18 st19 st20">-</text>
                <text id="chord7" transform="matrix(0.866 0.5 -0.5 0.866 369.7553 710.6641)" class="st18 st19 st20">-</text>
                <text id="chord6" transform="matrix(1 0 0 1 492.537 747.5631)" class="st18 st19 st20">-</text>
                <text id="chord5" transform="matrix(0.866 -0.5 0.5 0.866 617.3181 718.1274)" class="st18 st19 st20">-</text>
                <text id="chord4" transform="matrix(0.5 -0.866 0.866 0.5 710.6641 630.2456)" class="st18 st19 st20">-</text>
                <text id="chord3" transform="matrix(6.123234e-17 -1 1 6.123234e-17 747.5638 507.4639)" class="st18 st19 st20">-</text>
                <text id="chord2" transform="matrix(-0.5 -0.866 0.866 -0.5 718.1284 382.6822)" class="st18 st19 st20">-</text>
                <text id="chord1" transform="matrix(-0.866 -0.5 0.5 -0.866 630.2456 289.335)" class="st18 st19 st20">-</text>
                <text id="chord0" transform="matrix(-1 0 0 -1 507.4629 252.4355)" class="st18 st19 st20">-</text>
              </g>
            </g>
              <text text-anchor="middle" id="scale" transform="matrix(1 0 0 1 500 515)" class="st19 st21">Ionian (Major)</text>
            <text text-anchor="middle" id="octave" transform="matrix(1 0 0 1 500 640)" class="st19 st21">4</text>
            <text text-anchor="middle" id="note" transform="matrix(1 0 0 1 500 450)" class="st22 st23">A</text>
            </svg>
  
  
    `,
    data: function() {
      return {
  
      };
    },
  
    methods: {
      setScaleMask (scale) {
           //Creates opaque mask in the wheel
           if (Scales.hasOwnProperty(scale))  {
             Chroma.scale = Scales[scale];
             $('#scale').text(Chroma.scale.name);
             setKeys(Chroma.wheel.root,Chroma.scale.steps);
             // Cycle through the wheel
             for (let i=0;i<12;i++) {
               //set chord texts
               $('#chord'+i).text(Chroma.scale.chords[i]);
               //set visibility as in the scale
               if (Scales[scale].steps[i]) {
                 $('#step'+i).attr('style', 'opacity:0; visibility:hidden');
               } else {
                 $('#step'+i).attr('style', 'opacity:1');
               }
             }
           }
         },
        setKeys (root, scale) {
             // sets keys' appearance according to the scale (accepts array of steps)
  
             let distance =[0,1,2,4,5,6,7,8,10,11,12,13];
             let horShift = -70*distance[root];
  
  
             $('#Notes').css('transform','translateX('+horShift+'px)');
             //iterate through notes in a scale
             for (let i=0;i<12;i++) {
               //select all instances of the note in shifted positions
               let segment=$('[data-pitch="'+(root+i)%12+'"].segment');
  
               let note=$('[data-pitch="'+(root+i)%12+'"].note');
  
               // set octave shift according to the root
               if (((root+i)%12)<root) {
                 //shift all pitches on all elements in a
                 note[0].dataset.shifted=1;
                 segment[0].dataset.shift=1;
                 note[0].dataset.shift=1;
               } else {
                 note[0].dataset.shifted=0;
                 segment[0].dataset.shift=0;
                 note[0].dataset.shift=0;
  
               }
               if (scale[i]) {
                 note.attr('data-active', '1');
                 segment.attr('data-active', '1');
  
               } else {
               note.attr('data-active', '0');
               segment.attr('data-active', '0');
  
             }
             }
  
             $('.note circle').attr('stroke-width', '0');
  
             //outline the root note circle
             var circle = $('[data-pitch="'+root+'"] circle');
             circle.attr('stroke-width', '15');
             circle.attr('stroke', '#bbb');
  
           },
  
           getRoot () {
             //Gets root pitch and octave from the wheel
  
               let root=Math.round(this.endRotation)/30%12;
                 if (root<0) {
                   root = 12 + root;
                 };
  
             Chroma.wheel.root=root;
             console.log(Chroma.wheel.root);
  
               Chroma.octave=Math.floor(((this.endRotation)/30+48)/12);
               $('#octave').text(Chroma.octave);
  
             $('#note').text(noteNames[Chroma.wheel.root]);
             setKeys(Chroma.wheel.root,Chroma.scale.steps);
  
       }
    }
  }
  