multipage color

by Aaron Shockey

HTML

<div class="wrap">
  <div class="title">
    <p>Color a Pony!</p>
  </div>
  <div class="canvas">

    <?xml version="1.0" encoding="utf-8"?>
      <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1300" style="enable-background:new 0 0 1200 1300;" xml:space="preserve">

        <path class="st0" d="M1092,1301c-362.2,0-724.3,0-1086.5,0.1c-3.7,0-4.6-0.8-4.6-4.6C1,866.2,1,435.8,0.9,5.5c0-3.7,0.8-4.6,4.6-4.6
	c397,0.1,794,0.1,1191,0c3.7,0,4.6,0.8,4.6,4.6c-0.1,430.3-0.1,860.7,0,1291c0,3.7-0.8,4.6-4.6,4.6c-34.5-0.2-69-0.1-103.5-0.1
	c-1.2-1.3-0.9-3.2-1.9-4.6c-2.1-0.3-1.9,2-3.1,2.6c-2.5-1.5-4.1-4.7-7.8-4c-1,0.2-2-0.2-2.9,0.4c-0.6,0.4-0.5,1.2-1,1.6c0.6-0.3,0.7-1.7,1.1-1.3c1.8,1.6,4.3-1.2,6,1.5c0.9,1.5,2.8,2.3,4.8,1.7C1090,1298.6,1091.7,1298.5,1092,1301z" />
        <path class="st1" d="M1092,1301c-0.9-1.5-2.9-0.5-3.9-1.9l-0.2-0.4c0.1-1.1,0-2.3,0.5-3.3c0.6-1.4,2-1.6,3.3-1.4
	c1.8,0.2,1.3,1.6,1.3,2.6c0.1,1.5,0,2.9,0,4.4C1092.7,1301,1092.3,1301,1092,1301z" />
        <path class="st2"...

CSS

/*.st0,
	.st26,
	.st32 {
	  fill: #FEFEFE;
	}
	
	.st33,
	.st37,
	.st39,
	.st48,
	.st49 {
	  fill: #FFFFFF;
	}*/
	
	.st0 {
	  fill: #FEFEFE;
	}
	
	.st1 {
	  fill: #0A0A0A;
	}
	
	.st2 {
	  fill: #010101;
	}
	
	.st3 {
	  fill: #C3C3C3;
	}
	
	.st4 {
	  fill: #070707;
	}
	
	.st5 {
	  fill: #191919;
	}
	
	.st6 {
	  fill: #181818;
	}
	
	.st7 {
	  fill: #0C0C0C;
	}
	
	.st8 {
	  fill: #121212;
	}
	
	.st9 {
	  fill: #080808;
	}
	
	.st10 {
	  fill: #272727;
	}
	
	.st11 {
	  fill: #060606;
	}
	
	.st12 {
	  fill: #FFFFFF;
	}
	/*face front front leg*/
	
	.st13 {
	  fill: #333333;
	}
	/*body rear front leg*/
	
	.st14 {
	  fill: #FFFFFF;
	}
	/*bottom left bow*/
	
	.st15 {
	  fill: #FFFFFF;
	}
	/*tail bottom*/
	
	.st16 {
	  fill: #FFFFFF;
	}
	/*tail top*/
	
	.st17 {
	  fill: #FFFFFF;
	}
	/*top left bow*/
	
	.st18 {
	  fill: #FFFFFF;
	}
	/*tail middle*/
	
	.st19 {
	  fill: #FFFFFF;
	}
	/*bottom bang*/
	
	.st20 {
	  fill: #FFFFFF;
	}
	/*middle bang*/
	
	.st21 {
	  fill: #FFFFFF;
	}
	/*top right bow*/
	
	.st22 {
	  fill: #FFFFFF;
	}
	/*front back leg*/
	
	.st23 {
	  fill: #FFFFFF;
	}
	/*bottom right bow*/
	
	.st24 {
	  fill: #FFFFFF;
	}
	/*top bang*/
	
	.st25 {
	  fill: #FFFFFF;
	}
	/*rear back leg*/
	
	.st26 {
	  fill: #FFFFFF;
	}
	
	.st27 {
	  fill: #FFFFFF;
	}
	/*mane bottom*/
	
	.st28 {
	  fill: #FFFFFF;
	}
	/*mane middle*/
	
	.st29 {
	  fill: #FFFFFF;
	}
	/*mane top*/
	
	.st30 {
	  fill: #FFFFFF;
	}
	/*back hair right*/
	
	.st31 {
	  fill: #FFFFFF;
	}
	/*back hair left*/
	
	.st32 {
	  fill: #FFFFFF;
	}
	
	.st33 {
	  fill: #FFFFFF;
	}
	/*mouth gap*/
	
	.st34 {
	  fill: #FFF343;
	}
	
	.st35 {
	  fill: #FFFD2D;
	}
	
	.st36 {
	  fill: #007F6A;
	}
	
	.st37 {
	  fill: #FBFBFB;
	}
	
	.st38 {
	  fill: #000000;
	}
	
	.st39 {
	  fill: #F0F0F0;
	}
	
	.st40 {
	  fill: #373737;
	}
	
	.st41 {
	  fill: #464646;
	}
	/*9:00 left eye*/
	
	.st42 {
	  fill: #AAAAAA;
	}
	/*3:00 left eye*/
	
	.st43 {
	  fill: #424242;
	}
	/*8:00 left eye*/
	
	.st44 {
	  fill: #040404;
	}
	/*ear line*/
	
	.st45 {
	 ...

JavaScript

// JavaScript Document
$(document).ready(function() {
  $('.pony').css({
    fill: "#FFFFFF"
  });
  $('.eyeL1').css({
    fill: "#464646"
  });
  $('.eyeL3').css({
    fill: "#464646"
  });
  $('.eyeL5').css({
    fill: "#464646"
  });
  $('.eyeL2').css({
    fill: "#CBCBCB"
  });
  $('.eyeL4').css({
    fill: "#CBCBCB"
  });
  $('.eyeR1').css({
    fill: "#464646"
  });
  $('.eyeR3').css({
    fill: "#464646"
  });
  $('.eyeR2').css({
    fill: "#CBCBCB"
  });

  var paint = '';
  $('.swatch').on('click', function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
    var x = $(this).css('backgroundColor');
    hexc(x);
  });
  $('.pony').click(function() {
    //$(this).css("background-color", paint);
    $(this).css({
      fill: paint
    });
  });
  $('.eye').on('click', function() {
    $(this).css({
      fill: paint
    });
  });
  $(".reset").on('click', function() {
    $('.pony').css({
      fill: '#ffffff'
    });
    $('.eyeL1').css({
      fill: "#464646"
    });
    $('.eyeL3').css({
      fill: "#464646"
    });
    $('.eyeL5').css({
      fill: "#464646"
    });
    $('.eyeL2').css({
      fill: "#CBCBCB"
    });
    $('.eyeL4').css({
      fill: "#CBCBCB"
    });
    $('.eyeR1').css({
      fill: "#464646"
    });
    $('.eyeR3').css({
      fill: "#464646"
    });
    $('.eyeR2').css({
      fill: "#CBCBCB"
    });
    $('.art').css("background-color", "white");
  });

  function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
      parts[i] = parseInt(parts[i]).toString(16);
      if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    paint = '#' + parts.join('');
  }

  $('.thumb').click(function() {
    var choice = $(this).attr('id');
    $('.canvas').load('http://www.shockeyfamily.org/final/' + choice + '.svg');
  });

});