April 23, 2015

Cross stitch butterfly

Cross stitch butterfly

Cross stitch butterfly pattern using css and javascript.

HTML

<div id="center">
  <div id="mosaic" character="xx"></div>
</div>

CSS

body {
  background: white;
  font-size: 1em;
  font-family: Arial;
}

#center {
  text-align: center;
}

#mosaic:before {
  content: attr(character);
  position: relative;
  top: .75em;
  left: .5em;
}

#mosaic:after {
  content: attr(character);
  position: relative;
  top: .25em;
  left: .25em;
}

#mosaic {
  margin-left: -32em;
  position: relative;
  display: inline-block;
  text-shadow: 0em 0em 0 rgba(158, 161, 128, 0.2980392156862745), 1em 0em 0 rgba(66, 61, 42, 0.7568627450980392), 2em 0em 0 rgba(34, 33, 23, 0.8745098039215686), 3em 0em 0 rgba(24, 24, 17, 0.8823529411764706), 4em 0em 0 rgba(44, 45, 34, 0.796078431372549), 5em 0em 0 rgba(87, 89, 67, 0.5529411764705883), 6em 0em 0 rgba(167, 167, 125, 0.19215686274509805), 27em 0em 0 rgba(163, 163, 133, 0.09803921568627451), 28em 0em 0 rgba(110, 115, 83, 0.43529411764705883), 29em 0em 0 rgba(72, 76, 56, 0.6980392156862745), 30em 0em 0 rgba(59, 59, 44, 0.7803921568627451), 31em 0em 0 rgba(63, 63, 46, 0.7411764705882353), 32em 0em 0 rgba(91, 87, 59, 0.5607843137254902), 33em 0em 0 rgba(194, 194, 155, 0.1803921568627451), 0em 1em 0 rgba(29, 25, 18, 0.8549019607843137), 1em 1em 0 rgba(1, 0, 0, 1), 2em 1em 0 rgba(2, 0, 0, 1), 3em 1em 0 rgba(0, 0, 0, 1), 4em 1em 0 rgba(0, 0, 0, 1), 5em 1em 0 rgba(0, 0, 0, 1), 6em 1em 0 rgba(6, 6, 3, 0.996078431372549), 7em 1em 0 rgba(84, 81, 60, 0.6666666666666666), 8em 1em 0 rgba(148, 148, 115, 0.12156862745098039), 25em 1em 0 rgba(149, 149, 106, 0.047058823529411764), 26em 1em 0 rgba(98, 100, 79, 0.5215686274509804), 27em 1em 0 rgba(21, 21, 17, 0.9411764705882353), 28em 1em 0 rgba(0, 0, 0, 1), 29em 1em 0 rgba(0, 0, 0, 1), 30em 1em 0 rgba(3, 0, 0, 1), 31em 1em 0 rgba(9, 2, 1, 1), 32em 1em 0 rgba(10, 0, 0, 1), 33em 1em 0 rgba(69, 58, 40, 0.8), 0em 2em 0 rgba(35, 29, 24, 0.8392156862745098), 1em 2em 0 rgba(0, 0, 0, 1), 2em 2em 0 rgba(0, 0, 0, 1), 3em 2em 0 rgba(0, 0, 0, 1), 4em 2em 0 rgba(0, 0, 0, 1), 5em 2em 0 rgba(0, 0, 0, 1), 6em 2em 0 rgba(0, 0, 0, 1), 7em 2em 0 rgba(0, 0, 0, 1), 8em 2em 0 rgba(23, 20, 13, 0.9294117647058824), 9em 2em 0 rgba(132, 121, 90, 0.36470588235294116), 24em 2em 0 rgba(120, 120, 92, 0.25098039215686274), 25em 2em 0 rgba(33, 33, 22, 0.8509803921568627), 26em 2em 0 rgba(0, 0, 0, 1), 27em 2em 0 rgba(0, 0, 0, 1), 28em 2em 0 rgba(2, 2, 2, 1), 29em 2em 0 rgba(5, 3, 2, 1), 30em 2em 0 rgba(7, 4, 2, 1), 31em 2em 0 rgba(7, 5, 3, 1), 32em 2em 0 rgba(6, 0, 0, 1), 33em 2em 0 rgba(47, 36, 24, 0.8431372549019608), 0em 3em 0 rgba(98, 96, 84, 0.5019607843137255), 1em 3em 0 rgba(0, 0, 0, 1), 2em 3em 0 rgba(0, 0, 0, 1), 3em 3em 0 rgba(0, 0, 0, 1), 4em 3em 0 rgba(0, 0, 0, 1), 5em 3em 0 rgba(0, 0, 0, 1), 6em 3em 0 rgba(0, 0, 0, 1), 7em 3em 0 rgba(0, 0, 0, 1), 8em 3em 0 rgba(4, 8, 19, 1), 9em 3em 0 rgba(12, 44, 79, 1), 10em 3em 0 rgba(96, 96, 78, 0.5647058823529412), 11em 3em 0 rgba(128, 128, 128, 0.00784313725490196), 23em 3em 0 rgba(103, 101, 86, 0.4549019607843137), 24em 3em 0 rgba(13, 38, 62, 0.9882352941176471), 25em 3em 0 rgba(0, 8, 18, 1), 26em 3em 0 rgba(0, 0, 0, 1), 27em 3em 0 rgba(0, 0, 0, 1), 28em 3em 0 rgba(0, 0, 0, 1), 29em 3em 0 rgba(0, 0, 0, 1), 30em 3em 0 rgba(7, 4, 2, 1), 31em 3em 0 rgba(11, 7, 4, 1), 32em 3em 0 rgba(2, 0, 0, 1), 33em 3em 0 rgba(104, 100, 85, 0.5294117647058824), 0em 4em 0 rgba(155, 162, 137, 0.1607843137254902), 1em 4em 0 rgba(7, 7, 5, 0.9764705882352941), 2em 4em 0 rgba(0, 0, 0, 1), 3em 4em 0 rgba(13, 7, 1, 1), 4em 4em 0 rgba(17, 7, 2, 1), 5em 4em 0 rgba(7, 2, 2, 1), 6em 4em 0 rgba(1, 0, 0, 1), 7em 4em 0 rgba(2, 3, 7, 1), 8em 4em 0 rgba(19, 64, 111, 1), 9em 4em 0 rgba(18, 97, 161, 1), 10em 4em 0 rgba(1, 41, 73, 1), 11em 4em 0 rgba(67, 58, 40, 0.6431372549019608), 12em 4em 0 rgba(85, 85, 85, 0.011764705882352941), 22em 4em 0 rgba(87, 77, 62, 0.5294117647058824), 23em 4em 0 rgba(9, 39, 62, 1), 24em 4em 0 rgba(23, 103, 158, 1), 25em 4em 0 rgba(18, 58, 99, 1), 26em 4em 0 rgba(1, 0, 4, 1), 27em 4em 0 rgba(3, 1, 0, 1), 28em 4em 0 rgba(14, 7, 2, 1), 29em 4em 0 rgba(18, 10, 2, 1), 30em 4em 0 rgba(13, 7, 1, 1), 31em 4em 0 rgba(1, 0, 0, 1), 32em 4em 0 rgba(8, 7, 5, 0.9764705882352941), 33em 4em 0 rgba(172, 172, 142, 0.16862745098039217), 1em 5em 0 rgba(38, 35, 30, 0.7725490196078432), 2em 5em 0 rgba(0, 0, 0, 1), 3em 5em 0 rgba(8, 4, 1, 1), 4em 5em 0 rgba(15, 6, 1, 1), 5em 5em 0 rgba(15, 7, 1, 1), 6em 5em 0 rgba(9, 3, 3, 1), 7em 5em 0 rgba(14, 39, 69, 1), 8em 5em 0 rgba(16, 51, 85, 1), 9em 5em 0 rgba(7, 136, 215, 1), 10em 5em 0 rgba(8, 154, 236, 1), 11em 5em 0 rgba(1, 27, 44, 1), 12em 5em 0 rgba(67, 62, 50, 0.6), 21em 5em 0 rgba(96, 94, 78, 0.5098039215686274), 22em 5em 0 rgba(4, 12, 20, 1), 23em 5em 0 rgba(11, 149, 216, 1), 24em 5em 0 rgba(6, 155, 231, 1), 25em 5em 0 rgba(16, 55, 87, 1), 26em 5em 0 rgba(13, 34, 62, 1), 27em 5em 0 rgba(9, 5, 4, 1), 28em 5em 0 rgba(17, 7, 1, 1), 29em 5em 0 rgba(16, 6, 1, 1), 30em 5em 0 rgba(12, 4, 0, 1), 31em 5em 0 rgba(0, 0, 0, 1), 32em 5em 0 rgba(28, 30, 22, 0.8117647058823529), 33em 5em 0 rgba(0, 0, 0, 0.00392156862745098), 1em 6em 0 rgba(68, 68, 56, 0.5843137254901961), 2em 6em 0 rgba(0, 0, 0, 1), 3em 6em 0 rgba(26, 13, 2, 1), 4em 6em 0 rgba(28, 15, 2, 1), 5em 6em 0 rgba(29, 16, 0, 1), 6em 6em 0 rgba(28, 17, 11, 1), 7em 6em 0 rgba(17, 79, 121, 1), 8em 6em 0 rgba(15, 128, 183, 1), 9em 6em 0 rgba(3, 170, 255, 1), 10em 6em 0 rgba(3, 178, 255, 1), 11em 6em 0 rgba(15, 127, 181, 1), 12em 6em 0 rgba(0, 0, 0, 1), 13em 6em 0 rgba(102, 102, 86, 0.49019607843137253), 20em 6em 0 rgba(133, 130, 112, 0.3843137254901961), 21em 6em 0 rgba(5, 0, 0, 1), 22em 6em 0 rgba(11, 110, 150, 1), 23em 6em 0 rgba(3, 184, 255, 1), 24em 6em 0 rgba(2, 173, 254, 1), 25em 6em 0 rgba(13, 137, 189, 1), 26em 6em 0 rgba(18, 86, 124, 1), 27em 6em 0 rgba(26, 16, 12, 1), 28em 6em 0 rgba(30, 20, 2, 1), 29em 6em 0 rgba(31, 20, 3, 1), 30em 6em 0 rgba(25, 14, 3, 1), 31em 6em 0 rgba(3, 0, 0, 1), 32em 6em 0 rgba(58, 58, 48, 0.7058823529411765), 1em 7em 0 rgba(109, 111, 92, 0.3686274509803922), 2em 7em 0 rgba(0, 0, 0, 1), 3em 7em 0 rgba(14, 8, 2, 1), 4em 7em 0 rgba(28, 20, 7, 1), 5em 7em 0 rgba(34, 22, 3, 1), 6em 7em 0 rgba(31, 18, 14, 1), 7em 7em 0 rgba(18, 107, 148, 1), 8em 7em 0 rgba(17, 160, 219, 1), 9em 7em 0 rgba(11, 173, 238, 1), 10em 7em 0 rgba(2, 177, 253, 1), 11em 7em 0 rgba(4, 182, 255, 1), 12em 7em 0 rgba(13, 100, 139, 1), 13em 7em 0 rgba(0, 0, 0, 0.996078431372549), 14em 7em 0 rgba(157, 157, 133, 0.28627450980392155), 19em 7em 0 rgba(174, 174, 157, 0.1843137254901961), 20em 7em 0 rgba(15, 5, 0, 0.9490196078431372), 21em 7em 0 rgba(10, 69, 98, 1), 22em 7em 0 rgba(6, 184, 255, 1), 23em 7em 0 rgba(0, 185, 255, 1), 24em 7em 0 rgba(6, 187, 246, 1), 25em 7em 0 rgba(16, 167, 220, 1), 26em 7em 0 rgba(14, 116, 161, 1), 27em 7em 0 rgba(26, 18, 15, 1), 28em 7em 0 rgba(29, 16, 0, 1), 29em 7em 0 rgba(23, 15, 3, 1), 30em 7em 0 rgba(13, 8, 2, 1), 31em 7em 0 rgba(0, 0, 0, 1), 32em 7em 0 rgba(66, 66, 52, 0.592156862745098), 1em 8em 0 rgba(109, 113, 89, 0.24705882352941178), 2em 8em 0 rgba(6, 3, 2, 1), 3em 8em 0 rgba(28, 16, 2, 1), 4em 8em 0 rgba(35, 21, 2, 1), 5em 8em 0 rgba(38, 28, 7, 1), 6em 8em 0 rgba(30, 64, 81, 1), 7em 8em 0 rgba(13, 141, 187, 1), 8em 8em 0 rgba(7, 186, 245, 1), 9em 8em 0 rgba(16, 161, 207, 1), 10em 8em 0 rgba(5, 181, 237, 1), 11em 8em 0 rgba(0, 188, 255, 1), 12em 8em 0 rgba(6, 180, 255, 1), 13em 8em 0 rgba(11, 61, 81, 1), 14em 8em 0 rgba(36, 23, 16, 0.8588235294117647), 15em 8em 0 rgba(188, 188, 174, 0.07450980392156863), 19em 8em 0 rgba(56, 49, 41, 0.7333333333333333), 20em 8em 0 rgba(6, 37, 50, 1), 21em 8em 0 rgba(10, 175, 246, 1), 22em 8em 0 rgba(0, 189, 255, 1), 23em 8em 0 rgba(5, 186, 243, 1), 24em 8em 0 rgba(17, 159, 202, 1), 25em 8em 0 rgba(6, 184, 242, 1), 26em 8em 0 rgba(10, 149, 201, 1), 27em 8em 0 rgba(31, 70, 86, 1), 28em 8em 0 rgba(38, 23, 3, 1), 29em 8em 0 rgba(35, 23, 2, 1), 30em 8em 0 rgba(28, 17, 4, 1), 31em 8em 0 rgba(0, 0, 0, 1), 32em 8em 0 rgba(87, 92, 69, 0.4470588235294118), 1em 9em 0 rgba(153, 153, 128, 0.11764705882352941), 2em 9em 0 rgba(15, 15, 13, 0.9490196078431372), 3em 9em 0 rgba(12, 6, 0, 1), 4em 9em 0 rgba(39, 26, 5, 1), 5em 9em 0 rgba(47, 32, 10, 1), 6em 9em 0 rgba(50, 46, 31, 1), 7em 9em 0 rgba(28, 97, 116, 1), 8em 9em 0 rgba(8, 181, 238, 1), 9em 9em 0 rgba(7, 185, 243, 1), 10em 9em 0 rgba(13, 159, 208, 1), 11em 9em 0 rgba(11, 170, 224, 1), 12em 9em 0 rgba(2, 186, 255, 1), 13em 9em 0 rgba(16, 163, 217, 1), 14em 9em 0 rgba(12, 26, 24, 1), 15em 9em 0 rgba(95, 89, 75, 0.5607843137254902), 18em 9em 0 rgba(141, 138, 120, 0.3764705882352941), 19em 9em 0 rgba(5, 4, 0, 1), 20em 9em 0 rgba(17, 142, 185, 1), 21em 9em 0 rgba(3, 188, 255, 1), 22em 9em 0 rgba(9, 172, 229, 1), 23em 9em 0 rgba(14, 158, 208, 1), 24em 9em 0 rgba(8, 177, 238, 1), 25em 9em 0 rgba(6, 184, 247, 1), 26em 9em 0 rgba(18, 110, 141, 1), 27em 9em 0 rgba(39, 41, 36, 1), 28em 9em 0 rgba(39, 23, 4, 1), 29em 9em 0 rgba(32, 22, 3, 1), 30em 9em 0 rgba(15, 8, 0, 1), 31em 9em 0 rgba(0, 0, 0, 1), 32em 9em 0 rgba(129, 133, 110, 0.2549019607843137), 2em 10em 0 rgba(41, 39, 31, 0.8117647058823529), 3em 10em 0 rgba(20, 12, 0, 1), 4em 10em 0 rgba(46, 33, 6, 1), 5em 10em 0 rgba(52, 40, 14, 1), 6em 10em 0 rgba(42, 70, 69, 1), 7em 10em 0 rgba(32, 114, 131, 1), 8em 10em 0 rgba(15, 160, 198, 1), 9em 10em 0 rgba(6, 194, 246, 1), 10em 10em 0 rgba(9, 187, 241, 1), 11em 10em 0 rgba(14, 157, 205, 1), 12em 10em 0 rgba(13, 144, 194, 1), 13em 10em 0 rgba(12, 160, 211, 1), 14em 10em 0 rgba(31, 110, 113, 1), 15em 10em 0 rgba(32, 28, 19, 0.9137254901960784), 16em 10em 0 rgba(93, 92, 73, 0.6431372549019608), 17em 10em 0 rgba(87, 86, 70, 0.6745098039215687), 18em 10em 0 rgba(51, 45, 34, 0.8274509803921568), 19em 10em 0 rgba(28, 79, 77, 1), 20em 10em 0 rgba(14, 154, 203, 1), 21em 10em 0 rgba(12, 145, 200, 1), 22em 10em 0 rgba(12, 148, 200, 1), 23em 10em 0 rgba(9, 174, 234, 1), 24em 10em 0 rgba(7, 183, 243, 1), 25em 10em 0 rgba(10, 152, 198, 1), 26em 10em 0 rgba(22, 109, 130, 1), 27em 10em 0 rgba(28, 69, 79, 1), 28em 10em 0 rgba(38, 25, 11, 1), 29em 10em 0 rgba(34, 21, 2, 1), 30em 10em 0 rgba(16, 8, 0, 1), 31em 10em 0 rgba(33, 32, 24, 0.8745098039215686), 32em 10em 0 rgba(179, 179, 128, 0.0392156862745098), 2em 11em 0 rgba(83, 83, 71, 0.592156862745098), 3em 11em 0 rgba(5, 0, 0, 1), 4em 11em 0 rgba(57, 42, 13, 1), 5em 11em 0 rgba(62, 45, 11, 1), 6em 11em 0 rgba(53, 50, 28, 1), 7em 11em 0 rgba(35, 89, 98, 1), 8em 11em 0 rgba(11, 153, 204, 1), 9em 11em 0 rgba(3, 187, 253, 1), 10em 11em 0 rgba(2, 186, 250, 1), 11em 11em 0 rgba(1, 183, 250, 1), 12em 11em 0 rgba(6, 173, 239, 1), 13em 11em 0 rgba(12, 148, 201, 1), 14em 11em 0 rgba(31, 112, 121, 1), 15em 11em 0 rgba(39, 63, 45, 1), 16em 11em 0 rgba(12, 13, 6, 1), 17em 11em 0 rgba(17, 19, 11, 1), 18em 11em 0 rgba(40, 51, 31, 1), 19em 11em 0 rgba(37, 102, 104, 1), 20em 11em 0 rgba(15, 136, 182, 1), 21em 11em 0 rgba(7, 164, 229, 1), 22em 11em 0 rgba(4, 177, 242, 1), 23em 11em 0 rgba(2, 177, 241, 1), 24em 11em 0 rgba(3, 176, 243, 1), 25em 11em 0 rgba(8, 154, 219, 1), 26em 11em 0 rgba(24, 85, 116, 1), 27em 11em 0 rgba(31, 30, 24, 1), 28em 11em 0 rgba(41, 23, 3, 1), 29em 11em 0 rgba(43, 29, 4, 1), 30em 11em 0 rgba(1, 0, 0, 1), 31em 11em 0 rgba(83, 83, 63, 0.6627450980392157), 2em 12em 0 rgba(142, 146, 124, 0.27450980392156865), 3em 12em 0 rgba(1, 0, 0, 1), 4em 12em 0 rgba(11, 6, 0, 1), 5em 12em 0 rgba(23, 13, 2, 1), 6em 12em 0 rgba(30, 78, 97, 1), 7em 12em 0 rgba(18, 146, 187, 1), 8em 12em 0 rgba(7, 190, 234, 1), 9em 12em 0 rgba(6, 202, 251, 1), 10em 12em 0 rgba(7, 195, 242, 1), 11em 12em 0 rgba(6, 184, 232, 1), 12em 12em 0 rgba(3, 174, 228, 1), 13em 12em 0 rgba(5, 171, 226, 1), 14em 12em 0 rgba(19, 144, 166, 1), 15em 12em 0 rgba(40, 83, 65, 1), 16em 12em 0 rgba(26, 32, 15, 1), 17em 12em 0 rgba(30, 38, 20, 1), 18em 12em 0 rgba(37, 61, 40, 1), 19em 12em 0 rgba(25, 128, 140, 1), 20em 12em 0 rgba(7, 162, 217, 1), 21em 12em 0 rgba(3, 167, 228, 1), 22em 12em 0 rgba(5, 177, 233, 1), 23em 12em 0 rgba(7, 186, 238, 1), 24em 12em 0 rgba(9, 193, 245, 1), 25em 12em 0 rgba(10, 184, 240, 1), 26em 12em 0 rgba(18, 143, 190, 1), 27em 12em 0 rgba(26, 66, 92, 1), 28em 12em 0 rgba(15, 5, 0, 1), 29em 12em 0 rgba(5, 3, 0, 1), 30em 12em 0 rgba(0, 0, 0, 1), 31em 12em 0 rgba(154, 150, 121, 0.3058823529411765), 3em 13em 0 rgba(85, 85, 71, 0.6470588235294118), 4em 13em 0 rgba(7, 1, 0, 0.9803921568627451), 5em 13em 0 rgba(36, 22, 7, 0.9176470588235294), 6em 13em 0 rgba(39, 49, 46, 0.9882352941176471), 7em 13em 0 rgba(27, 115, 134, 1), 8em 13em 0 rgba(13, 159, 194, 1), 9em 13em 0 rgba(7, 166, 211, 1), 10em 13em 0 rgba(10, 159, 198, 1), 11em 13em 0 rgba(13, 176, 217, 1), 12em 13em 0 rgba(14, 178, 223, 1), 13em 13em 0 rgba(22, 165, 201, 1), 14em 13em 0 rgba(45, 129, 131, 1), 15em 13em 0 rgba(62, 73, 45, 1), 16em 13em 0 rgba(47, 52, 25, 1), 17em 13em 0 rgba(40, 52, 24, 1), 18em 13em 0 rgba(41, 57, 37, 1), 19em 13em 0 rgba(43, 123, 121, 1), 20em 13em 0 rgba(27, 152, 184, 1), 21em 13em 0 rgba(21, 159, 204, 1), 22em 13em 0 rgba(17, 152, 195, 1), 23em 13em 0 rgba(12, 131, 173, 1), 24em 13em 0 rgba(7, 135, 181, 1), 25em 13em 0 rgba(9, 134, 177, 1), 26em 13em 0 rgba(16, 106, 133, 1), 27em 13em 0 rgba(32, 45, 47, 0.9921568627450981), 28em 13em 0 rgba(34, 23, 10, 0.8823529411764706), 29em 13em 0 rgba(8, 6, 2, 0.9058823529411765), 30em 13em 0 rgba(99, 98, 80, 0.5529411764705883), 3em 14em 0 rgba(170, 170, 128, 0.023529411764705882), 4em 14em 0 rgba(128, 128, 85, 0.047058823529411764), 5em 14em 0 rgba(118, 102, 75, 0.45098039215686275), 6em 14em 0 rgba(50, 23, 10, 1), 7em 14em 0 rgba(19, 16, 20, 1), 8em 14em 0 rgba(18, 10, 10, 1), 9em 14em 0 rgba(41, 13, 2, 1), 10em 14em 0 rgba(75, 60, 36, 1), 11em 14em 0 rgba(96, 120, 98, 1), 12em 14em 0 rgba(87, 156, 148, 1), 13em 14em 0 rgba(73, 148, 141, 1), 14em 14em 0 rgba(66, 128, 121, 1), 15em 14em 0 rgba(64, 118, 99, 1), 16em 14em 0 rgba(63, 79, 42, 1), 17em 14em 0 rgba(49, 64, 31, 1), 18em 14em 0 rgba(62, 95, 69, 1), 19em 14em 0 rgba(59, 121, 112, 1), 20em 14em 0 rgba(67, 133, 127, 1), 21em 14em 0 rgba(77, 142, 136, 1), 22em 14em 0 rgba(90, 117, 100, 1), 23em 14em 0 rgba(67, 50, 31, 1), 24em 14em 0 rgba(26, 0, 0, 1), 25em 14em 0 rgba(6, 0, 0, 1), 26em 14em 0 rgba(3, 0, 1, 1), 27em 14em 0 rgba(37, 12, 5, 1), 28em 14em 0 rgba(114, 102, 79, 0.43137254901960786), 30em 14em 0 rgba(0, 0, 0, 0.00392156862745098), 4em 15em 0 rgba(209, 209, 173, 0.10980392156862745), 5em 15em 0 rgba(63, 40, 22, 0.9058823529411765), 6em 15em 0 rgba(22, 3, 0, 1), 7em 15em 0 rgba(15, 3, 0, 1), 8em 15em 0 rgba(43, 24, 13, 1), 9em 15em 0 rgba(63, 111, 101, 1), 10em 15em 0 rgba(53, 176, 178, 1), 11em 15em 0 rgba(40, 189, 197, 1), 12em 15em 0 rgba(40, 189, 199, 1), 13em 15em 0 rgba(24, 181, 204, 1), 14em 15em 0 rgba(27, 163, 179, 1), 15em 15em 0 rgba(42, 132, 122, 0.996078431372549), 16em 15em 0 rgba(59, 66, 38, 0.9725490196078431), 17em 15em 0 rgba(60, 60, 25, 0.984313725490196), 18em 15em 0 rgba(45, 108, 94, 0.9686274509803922), 19em 15em 0 rgba(26, 154, 172, 1), 20em 15em 0 rgba(21, 172, 199, 1), 21em 15em 0 rgba(33, 182, 203, 1), 22em 15em 0 rgba(32, 182, 196, 1), 23em 15em 0 rgba(37, 163, 174, 1), 24em 15em 0 rgba(51, 99, 99, 1), 25em 15em 0 rgba(32, 21, 16, 1), 26em 15em 0 rgba(8, 1, 0, 1), 27em 15em 0 rgba(5, 0, 0, 1), 28em 15em 0 rgba(39, 23, 17, 0.9176470588235294), 29em 15em 0 rgba(208, 208, 179, 0.10588235294117647), 4em 16em 0 rgba(94, 85, 68, 0.6352941176470588), 5em 16em 0 rgba(2, 0, 0, 1), 6em 16em 0 rgba(3, 1, 0, 1), 7em 16em 0 rgba(9, 5, 6, 1), 8em 16em 0 rgba(34, 112, 125, 1), 9em 16em 0 rgba(21, 208, 234, 1), 10em 16em 0 rgba(14, 215, 241, 1), 11em 16em 0 rgba(7, 215, 240, 1), 12em 16em 0 rgba(1, 211, 253, 1), 13em 16em 0 rgba(6, 200, 243, 1), 14em 16em 0 rgba(27, 165, 176, 1), 15em 16em 0 rgba(67, 145, 132, 0.8745098039215686), 16em 16em 0 rgba(97, 80, 60, 0.7019607843137254), 17em 16em 0 rgba(72, 45, 25, 0.8901960784313725), 18em 16em 0 rgba(85, 141, 121, 0.6862745098039216), 19em 16em 0 rgba(26, 155, 166, 1), 20em 16em 0 rgba(9, 189, 230, 1), 21em 16em 0 rgba(0, 204, 255, 1), 22em 16em 0 rgba(5, 203, 239, 1), 23em 16em 0 rgba(4, 200, 232, 1), 24em 16em 0 rgba(13, 192, 224, 1), 25em 16em 0 rgba(27, 113, 133, 1), 26em 16em 0 rgba(9, 10, 12, 1), 27em 16em 0 rgba(2, 0, 0, 1), 28em 16em 0 rgba(0, 0, 0, 1), 29em 16em 0 rgba(100, 94, 78, 0.5411764705882353), 3em 17em 0 rgba(116, 112, 92, 0.29411764705882354), 4em 17em 0 rgba(1, 0, 0, 1), 5em 17em 0 rgba(0, 0, 0, 1), 6em 17em 0 rgba(21, 82, 100, 1), 7em 17em 0 rgba(25, 167, 198, 1), 8em 17em 0 rgba(15, 208, 244, 1), 9em 17em 0 rgba(7, 218, 252, 1), 10em 17em 0 rgba(11, 216, 245, 1), 11em 17em 0 rgba(9, 218, 247, 1), 12em 17em 0 rgba(7, 215, 248, 1), 13em 17em 0 rgba(21, 190, 211, 1), 14em 17em 0 rgba(19, 174, 189, 1), 15em 17em 0 rgba(99, 166, 148, 0.6274509803921569), 16em 17em 0 rgba(115, 86, 62, 0.5843137254901961), 17em 17em 0 rgba(81, 50, 29, 0.8196078431372549), 18em 17em 0 rgba(123, 168, 148, 0.4), 19em 17em 0 rgba(17, 174, 185, 1), 20em 17em 0 rgba(20, 177, 203, 1), 21em 17em 0 rgba(10, 201, 240, 1), 22em 17em 0 rgba(7, 210, 248, 1), 23em 17em 0 rgba(11, 200, 232, 1), 24em 17em 0 rgba(6, 200, 240, 1), 25em 17em 0 rgba(13, 190, 227, 1), 26em 17em 0 rgba(24, 156, 189, 1), 27em 17em 0 rgba(17, 83, 108, 1), 28em 17em 0 rgba(0, 0, 0, 1), 29em 17em 0 rgba(8, 7, 5, 0.9921568627450981), 30em 17em 0 rgba(110, 110, 85, 0.2), 3em 18em 0 rgba(162, 170, 139, 0.12941176470588237), 4em 18em 0 rgba(18, 13, 10, 0.9215686274509803), 5em 18em 0 rgba(3, 31, 40, 1), 6em 18em 0 rgba(14, 170, 209, 1), 7em 18em 0 rgba(7, 210, 255, 1), 8em 18em 0 rgba(6, 210, 252, 1), 9em 18em 0 rgba(6, 220, 251, 1), 10em 18em 0 rgba(7, 222, 249, 1), 11em 18em 0 rgba(18, 214, 231, 1), 12em 18em 0 rgba(16, 206, 227, 1), 13em 18em 0 rgba(14, 206, 232, 1), 14em 18em 0 rgba(20, 174, 191, 1), 15em 18em 0 rgba(128, 156, 134, 0.3137254901960784), 16em 18em 0 rgba(142, 122, 93, 0.45098039215686275), 17em 18em 0 rgba(82, 54, 31, 0.8196078431372549), 18em 18em 0 rgba(147, 167, 142, 0.20392156862745098), 19em 18em 0 rgba(36, 177, 182, 1), 20em 18em 0 rgba(10, 197, 226, 1), 21em 18em 0 rgba(16, 196, 223, 1), 22em 18em 0 rgba(21, 195, 220, 1), 23em 18em 0 rgba(10, 206, 238, 1), 24em 18em 0 rgba(3, 206, 245, 1), 25em 18em 0 rgba(5, 194, 239, 1), 26em 18em 0 rgba(7, 189, 240, 1), 27em 18em 0 rgba(15, 152, 197, 1), 28em 18em 0 rgba(0, 18, 27, 1), 29em 18em 0 rgba(28, 26, 19, 0.8901960784313725), 30em 18em 0 rgba(158, 170, 134, 0.08235294117647059), 3em 19em 0 rgba(191, 191, 128, 0.01568627450980392), 4em 19em 0 rgba(46, 37, 28, 0.8117647058823529), 5em 19em 0 rgba(7, 73, 94, 1), 6em 19em 0 rgba(14, 205, 254, 1), 7em 19em 0 rgba(9, 203, 252, 1), 8em 19em 0 rgba(8, 210, 246, 1), 9em 19em 0 rgba(5, 218, 250, 1), 10em 19em 0 rgba(6, 223, 250, 1), 11em 19em 0 rgba(7, 222, 245, 1), 12em 19em 0 rgba(9, 218, 240, 1), 13em 19em 0 rgba(12, 214, 234, 1), 14em 19em 0 rgba(43, 163, 163, 0.9725490196078431), 15em 19em 0 rgba(159, 159, 128, 0.09411764705882353), 16em 19em 0 rgba(106, 85, 54, 0.38823529411764707), 17em 19em 0 rgba(80, 51, 27, 0.8784313725490196), 18em 19em 0 rgba(150, 144, 118, 0.15294117647058825), 19em 19em 0 rgba(53, 150, 147, 0.9450980392156862), 20em 19em 0 rgba(18, 199, 222, 1), 21em 19em 0 rgba(8, 211, 238, 1), 22em 19em 0 rgba(18, 204, 227, 1), 23em 19em 0 rgba(10, 206, 235, 1), 24em 19em 0 rgba(7, 202, 240, 1), 25em 19em 0 rgba(7, 194, 238, 1), 26em 19em 0 rgba(6, 188, 241, 1), 27em 19em 0 rgba(8, 195, 254, 1), 28em 19em 0 rgba(5, 75, 107, 1), 29em 19em 0 rgba(64, 58, 43, 0.7450980392156863), 3em 20em 0 rgba(129, 133, 110, 0.2549019607843137), 4em 20em 0 rgba(2, 2, 0, 1), 5em 20em 0 rgba(0, 0, 0, 1), 6em 20em 0 rgba(18, 63, 82, 1), 7em 20em 0 rgba(16, 196, 236, 1), 8em 20em 0 rgba(4, 207, 249, 1), 9em 20em 0 rgba(6, 220, 248, 1), 10em 20em 0 rgba(8, 215, 243, 1), 11em 20em 0 rgba(8, 218, 238, 1), 12em 20em 0 rgba(7, 223, 241, 1), 13em 20em 0 rgba(16, 198, 211, 1), 14em 20em 0 rgba(92, 159, 141, 0.7568627450980392), 16em 20em 0 rgba(169, 158, 126, 0.2784313725490196), 17em 20em 0 rgba(91, 73, 45, 0.7803921568627451), 18em 20em 0 rgba(204, 153, 153, 0.0196078431372549), 19em 20em 0 rgba(81, 131, 115, 0.8274509803921568), 20em 20em 0 rgba(24, 187, 202, 1), 21em 20em 0 rgba(8, 212, 232, 1), 22em 20em 0 rgba(9, 205, 227, 1), 23em 20em 0 rgba(6, 203, 233, 1), 24em 20em 0 rgba(11, 198, 233, 1), 25em 20em 0 rgba(6, 192, 238, 1), 26em 20em 0 rgba(10, 185, 236, 1), 27em 20em 0 rgba(16, 84, 113, 1), 28em 20em 0 rgba(0, 0, 0, 1), 29em 20em 0 rgba(12, 11, 8, 0.9647058823529412), 30em 20em 0 rgba(127, 127, 107, 0.14901960784313725), 3em 21em 0 rgba(85, 85, 85, 0.011764705882352941), 4em 21em 0 rgba(157, 157, 125, 0.2235294117647059), 5em 21em 0 rgba(40, 32, 23, 0.8823529411764706), 6em 21em 0 rgba(9, 86, 112, 1), 7em 21em 0 rgba(10, 212, 255, 1), 8em 21em 0 rgba(5, 212, 251, 1), 9em 21em 0 rgba(15, 197, 225, 1), 10em 21em 0 rgba(7, 214, 246, 1), 11em 21em 0 rgba(10, 215, 238, 1), 12em 21em 0 rgba(9, 221, 241, 1), 13em 21em 0 rgba(24, 174, 177, 1), 14em 21em 0 rgba(148, 156, 131, 0.4745098039215686), 16em 21em 0 rgba(182, 182, 146, 0.027450980392156862), 17em 21em 0 rgba(167, 167, 128, 0.12549019607843137), 19em 21em 0 rgba(151, 147, 118, 0.4980392156862745), 20em 21em 0 rgba(30, 159, 170, 1), 21em 21em 0 rgba(12, 205, 225, 1), 22em 21em 0 rgba(6, 208, 234, 1), 23em 21em 0 rgba(4, 207, 238, 1), 24em 21em 0 rgba(13, 187, 223, 1), 25em 21em 0 rgba(11, 191, 239, 1), 26em 21em 0 rgba(9, 200, 255, 1), 27em 21em 0 rgba(9, 95, 126, 1), 28em 21em 0 rgba(22, 13, 8, 0.9254901960784314), 29em 21em 0 rgba(141, 141, 107, 0.2980392156862745), 30em 21em 0 rgba(182, 182, 109, 0.027450980392156862), 5em 22em 0 rgba(69, 69, 58, 0.7058823529411765), 6em 22em 0 rgba(0, 25, 38, 1), 7em 22em 0 rgba(18, 83, 108, 1), 8em 22em 0 rgba(22, 151, 182, 1), 9em 22em 0 rgba(8, 202, 239, 1), 10em 22em 0 rgba(8, 208, 242, 1), 11em 22em 0 rgba(5, 212, 242, 1), 12em 22em 0 rgba(6, 214, 235, 1), 13em 22em 0 rgba(45, 144, 139, 0.9607843137254902), 14em 22em 0 rgba(221, 208, 174, 0.14901960784313725), 19em 22em 0 rgba(196, 177, 147, 0.10196078431372549), 20em 22em 0 rgba(49, 131, 135, 0.9215686274509803), 21em 22em 0 rgba(7, 201, 228, 1), 22em 22em 0 rgba(6, 203, 233, 1), 23em 22em 0 rgba(7, 199, 235, 1), 24em 22em 0 rgba(4, 198, 244, 1), 25em 22em 0 rgba(20, 162, 204, 1), 26em 22em 0 rgba(19, 110, 144, 1), 27em 22em 0 rgba(4, 42, 60, 1), 28em 22em 0 rgba(58, 58, 48, 0.7529411764705882), 5em 23em 0 rgba(52, 53, 41, 0.7137254901960784), 6em 23em 0 rgba(0, 0, 0, 1), 7em 23em 0 rgba(0, 0, 0, 1), 8em 23em 0 rgba(20, 60, 71, 1), 9em 23em 0 rgba(26, 195, 235, 1), 10em 23em 0 rgba(17, 186, 221, 1), 11em 23em 0 rgba(6, 213, 248, 1), 12em 23em 0 rgba(14, 199, 217, 1), 13em 23em 0 rgba(98, 140, 125, 0.6941176470588235), 20em 23em 0 rgba(100, 139, 128, 0.6784313725490196), 21em 23em 0 rgba(13, 185, 214, 1), 22em 23em 0 rgba(6, 201, 237, 1), 23em 23em 0 rgba(15, 182, 219, 1), 24em 23em 0 rgba(14, 203, 252, 1), 25em 23em 0 rgba(18, 92, 115, 1), 26em 23em 0 rgba(1, 0, 0, 1), 27em 23em 0 rgba(0, 0, 0, 1), 28em 23em 0 rgba(37, 36, 30, 0.807843137254902), 29em 23em 0 rgba(0, 0, 0, 0.00784313725490196), 5em 24em 0 rgba(191, 191, 128, 0.01568627450980392), 6em 24em 0 rgba(76, 76, 64, 0.6862745098039216), 7em 24em 0 rgba(0, 0, 0, 1), 8em 24em 0 rgba(5, 10, 11, 1), 9em 24em 0 rgba(16, 19, 23, 1), 10em 24em 0 rgba(21, 108, 126, 1), 11em 24em 0 rgba(19, 175, 206, 1), 12em 24em 0 rgba(19, 41, 44, 1), 13em 24em 0 rgba(168, 155, 133, 0.4), 20em 24em 0 rgba(133, 119, 98, 0.4196078431372549), 21em 24em 0 rgba(29, 54, 55, 1), 22em 24em 0 rgba(15, 172, 205, 1), 23em 24em 0 rgba(15, 121, 147, 1), 24em 24em 0 rgba(16, 38, 48, 1), 25em 24em 0 rgba(7, 18, 24, 1), 26em 24em 0 rgba(0, 0, 0, 1), 27em 24em 0 rgba(41, 41, 32, 0.8313725490196079), 28em 24em 0 rgba(155, 162, 116, 0.12941176470588237), 6em 25em 0 rgba(142, 142, 119, 0.34509803921568627), 7em 25em 0 rgba(0, 0, 0, 1), 8em 25em 0 rgba(0, 0, 0, 1), 9em 25em 0 rgba(0, 0, 0, 1), 10em 25em 0 rgba(6, 11, 11, 1), 11em 25em 0 rgba(17, 29, 31, 1), 12em 25em 0 rgba(5, 2, 0, 1), 13em 25em 0 rgba(191, 181, 152, 0.20392156862745098), 20em 25em 0 rgba(131, 120, 100, 0.25098039215686274), 21em 25em 0 rgba(3, 0, 0, 1), 22em 25em 0 rgba(17, 38, 43, 1), 23em 25em 0 rgba(10, 20, 24, 1), 24em 25em 0 rgba(0, 0, 0, 1), 25em 25em 0 rgba(0, 0, 0, 1), 26em 25em 0 rgba(0, 0, 0, 1), 27em 25em 0 rgba(155, 155, 130, 0.4), 6em 26em 0 rgba(103, 103, 84, 0.48627450980392156), 7em 26em 0 rgba(0, 0, 0, 1), 8em 26em 0 rgba(4, 4, 3, 0.9607843137254902), 9em 26em 0 rgba(0, 0, 0, 1), 10em 26em 0 rgba(0, 0, 0, 1), 11em 26em 0 rgba(28, 25, 21, 0.8666666666666667), 12em 26em 0 rgba(114, 112, 90, 0.4117647058823529), 13em 26em 0 rgba(230, 230, 179, 0.0392156862745098), 20em 26em 0 rgba(206, 206, 167, 0.10196078431372549), 21em 26em 0 rgba(91, 91, 71, 0.5803921568627451), 22em 26em 0 rgba(28, 28, 22, 0.8980392156862745), 23em 26em 0 rgba(0, 0, 0, 1), 24em 26em 0 rgba(0, 0, 0, 1), 25em 26em 0 rgba(0, 0, 0, 1), 26em 26em 0 rgba(0, 0, 0, 1), 27em 26em 0 rgba(111, 111, 91, 0.3607843137254902), 6em 27em 0 rgba(66, 64, 53, 0.7137254901960784), 7em 27em 0 rgba(115, 115, 91, 0.28627450980392155), 8em 27em 0 rgba(98, 98, 76, 0.2235294117647059), 9em 27em 0 rgba(91, 89, 67, 0.5058823529411764), 10em 27em 0 rgba(31, 32, 26, 0.8156862745098039), 11em 27em 0 rgba(47, 42, 35, 0.7803921568627451), 22em 27em 0 rgba(43, 38, 32, 0.7843137254901961), 23em 27em 0 rgba(13, 14, 12, 0.9176470588235294), 24em 27em 0 rgba(45, 44, 38, 0.7098039215686275), 25em 27em 0 rgba(98, 98, 83, 0.40784313725490196), 26em 27em 0 rgba(86, 86, 72, 0.5450980392156862), 27em 27em 0 rgba(68, 68, 57, 0.5764705882352941), 5em 28em 0 rgba(153, 153, 132, 0.23529411764705882), 6em 28em 0 rgba(84, 80, 66, 0.6392156862745098), 10em 28em 0 rgba(149, 142, 120, 0.1411764705882353), 11em 28em 0 rgba(115, 108, 89, 0.3137254901960784), 22em 28em 0 rgba(97, 93, 75, 0.5176470588235295), 23em 28em 0 rgba(128, 128, 103, 0.24313725490196078), 26em 28em 0 rgba(195, 180, 165, 0.06666666666666667), 27em 28em 0 rgba(83, 80, 69, 0.6392156862745098), 28em 28em 0 rgba(170, 170, 142, 0.03529411764705882), 5em 29em 0 rgba(83, 80, 69, 0.6509803921568628), 6em 29em 0 rgba(114, 104, 87, 0.403921568627451), 27em 29em 0 rgba(75, 74, 64, 0.596078431372549), 28em 29em 0 rgba(162, 162, 135, 0.25882352941176473), 4em 30em 0 rgba(140, 140, 120, 0.2), 5em 30em 0 rgba(9, 8, 6, 1), 6em 30em 0 rgba(140, 125, 106, 0.20784313725490197), 27em 30em 0 rgba(47, 42, 36, 0.5529411764705883), 28em 30em 0 rgba(78, 78, 67, 0.7058823529411765), 4em 31em 0 rgba(128, 140, 102, 0.0784313725490196), 5em 31em 0 rgba(128, 128, 96, 0.4392156862745098), 6em 31em 0 rgba(191, 191, 159, 0.03137254901960784), 27em 31em 0 rgba(102, 97, 83, 0.37254901960784315), 28em 31em 0 rgba(72, 75, 59, 0.6274509803921569);
}

JavaScript

var temp = new Image();

temp.onload = function() {
    canvas.width = this.width;
    canvas.height = this.height;
    canvas.ctx.drawImage(this, 0, 0);
    var buffer = canvas.ctx.getImageData(0, 0, this.width, this.height);
    effect(buffer);
  }
  //temp.src='assets/images/butterfly.png';

var shadowString = '%x%em %y%em 0 rgba(%r%,%g%,%b%,%a%),';

var fill = function(who, where) {
  var temp = who;
  for (var i in where) {
    identifier = new RegExp("\\%" + i + "\\%", "g");
    temp = temp.replace(identifier, where[i]);
  }
  return temp;
}

var effect = function(pixels) {
  var d = pixels.data;
  var width = (canvas.width * 4);
  var shadow = 'text-shadow:';
  for (var i = 0; i < d.length; i += 4) {
    var te = {
      x: (i / 4) % canvas.width,
      y: Math.floor((i / 4) / canvas.width),
      r: d[i],
      g: d[i + 1],
      b: d[i + 2],
      a: (d[i + 3] / 255)
    };
    if (te.a != 0) {
      shadow += fill(shadowString, te);
    }
  }
  console.log(shadow);
};
demo

No comments:

Post a Comment

Popular Posts

Views