JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
window.onload = function() {
var darthvader = document.getElementById("darthvader");
var context = darthvader.getContext("2d");
// Mask - base
context.lineJoin = "round";
context.beginPath();
context.moveTo(270, 360);
context.quadraticCurveTo(270, 150, 470, 130);
context.bezierCurveTo(470, 100, 530, 100, 530, 130);
context.quadraticCurveTo(730, 150, 730, 360);
context.quadraticCurveTo(765, 440, 880, 760);
context.quadraticCurveTo(500, 950, 120, 760);
context.quadraticCurveTo(250, 380, 270, 360);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "#230000";
context.fillStyle = "#2d1821";
context.stroke();
context.fill();
context.save();
context.clip();
// helm bg back
context.beginPath();
context.moveTo(320, 600);
context.quadraticCurveTo(190, 750, 500, 880);
context.quadraticCurveTo(810, 750, 680, 600);
context.closePath();
context.fillStyle = "#30222f";
context.fill();
// helm bg face shadow left
context.beginPath();
context.moveTo(300, 565);
context.lineTo(345, 740);
context.lineTo(470, 825);
context.lineTo(500, 810);
context.closePath();
context.fillStyle = "#230d22";
context.fill();
// helm bg face shadow right
context.beginPath();
context.moveTo(700, 565);
context.lineTo(660, 705);
context.lineTo(630, 730);
context.lineTo(600, 650);
context.closePath();
context.fill();
// helm bg left
context.beginPath();
context.moveTo(240, 620);
context.quadraticCurveTo(130, 740, 360, 880);
context.lineTo(100, 880);
context.lineTo(100, 620);
context.closePath();
context.fillStyle = "#291016";
context.fill();
// helm bg right
context.beginPath();
context.moveTo(760, 620);
context.quadraticCurveTo(870, 740, 640, 880);
context.lineTo(900, 880);
context.lineTo(900, 620);
context.closePath();
context.fill();
context.beginPath();
context.arc(316, 496, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#4a4152";
context.fill();
context.beginPath();
context.arc(304, 508, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(304, 520, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(304, 532, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#200f15";
context.fill();
context.beginPath();
context.arc(292, 640, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#4a4152";
context.fill();
context.beginPath();
context.arc(292, 652, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(304, 652, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(304, 664, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(328, 724, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(328, 736, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(328, 748, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(340, 748, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(340, 760, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(364, 760, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(364, 772, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(364, 796, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(708, 640, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#200f15";
context.fill();
context.beginPath();
context.arc(708, 652, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(696, 652, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(696, 664, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(672, 712, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(672, 724, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(600, 760, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(600, 772, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(588, 772, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(588, 784, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(576, 784, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(576, 772, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(576, 796, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(564, 796, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(564, 808, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(564, 832, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(636, 760, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(636, 772, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(636, 796, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
// helm side left
context.beginPath();
context.moveTo(240, 813);
context.quadraticCurveTo(120, 750, 176, 750);
context.lineTo(291, 500);
context.quadraticCurveTo(295, 370, 385, 395);
context.lineTo(200, 200);
context.lineTo(100, 900);
context.closePath();
context.fillStyle = "#2f3447";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(350, 370);
context.quadraticCurveTo(265, 380, 260, 480);
context.lineTo(210, 620);
context.lineTo(150, 720);
context.lineTo(170, 740);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.beginPath();
context.moveTo(200, 490);
context.quadraticCurveTo(220, 465, 250, 465);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(200, 505);
context.quadraticCurveTo(220, 480, 265, 480);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(160, 625);
context.quadraticCurveTo(200, 600, 240, 610);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(165, 705);
context.quadraticCurveTo(175, 700, 185, 705);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.arc(296, 390, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(296, 402, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(284, 402, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(284, 414, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(240, 496, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(240, 508, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(228, 508, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(228, 520, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(182, 690, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
// helm side right
context.beginPath();
context.moveTo(760, 813);
context.quadraticCurveTo(880, 750, 824, 750);
context.lineTo(709, 500);
context.quadraticCurveTo(705, 370, 615, 395);
context.lineTo(800, 200);
context.lineTo(900, 900);
context.closePath();
context.fillStyle = "#2f3447";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(650, 370);
context.quadraticCurveTo(735, 380, 740, 480);
context.lineTo(790, 620);
context.lineTo(850, 720);
context.lineTo(830, 740);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.beginPath();
context.moveTo(700, 475);
context.quadraticCurveTo(730, 465, 760, 480);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.arc(768, 484, 3, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.moveTo(840, 625);
context.quadraticCurveTo(800, 600, 760, 610);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(835, 705);
context.quadraticCurveTo(815, 700, 815, 705);
context.lineWidth = 5;
context.stroke();
context.restore();
// helm top highlight left
context.beginPath();
context.moveTo(250, 350);
context.lineTo(470, 420);
context.lineTo(470, 100);
context.lineTo(250, 100);
context.closePath();
context.fillStyle = "#d6deeb";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(290, 360);
context.quadraticCurveTo(270, 180, 470, 150);
context.lineTo(470, 260);
context.quadraticCurveTo(400, 250, 390, 340);
context.quadraticCurveTo(320, 320, 290, 360);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(290, 360);
context.quadraticCurveTo(270, 180, 400, 160);
context.lineTo(420, 180);
context.lineTo(470, 180);
context.lineTo(470, 250);
context.quadraticCurveTo(335, 200, 360, 360);
context.closePath();
context.fillStyle = "#525e74";
context.fill();
context.restore();
context.beginPath();
context.arc(454, 212, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#d6deeb";
context.fill();
context.beginPath();
context.arc(454, 224, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(442, 224, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(442, 252, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(454, 252, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(454, 264, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(292, 264, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(282, 308, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(282, 320, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(294, 320, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(282, 332, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(454, 360, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(454, 372, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
// helm top highlight right
context.beginPath();
context.moveTo(750, 350);
context.lineTo(530, 420);
context.lineTo(530, 100);
context.lineTo(750, 100);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(730, 360);
context.quadraticCurveTo(740, 300, 680, 220);
context.quadraticCurveTo(580, 220, 530, 160);
context.lineTo(530, 410);
context.closePath();
context.fillStyle = "#53637d";
context.fill();
context.beginPath();
context.moveTo(530, 130);
context.lineTo(530, 410);
context.quadraticCurveTo(580, 350, 640, 330);
context.quadraticCurveTo(630, 280, 580, 280);
context.quadraticCurveTo(545, 280, 545, 150);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.beginPath();
context.arc(546, 148, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(546, 160, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(546, 196, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(624, 312, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.arc(636, 312, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(636, 324, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(570, 342, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.arc(570, 354, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(558, 354, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(582, 366, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(570, 366, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(558, 366, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.arc(546, 378, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(558, 378, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(546, 390, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
context.restore();
// Mask - inner side left
context.beginPath();
context.moveTo(369, 387);
context.quadraticCurveTo(290, 360, 280, 500);
context.lineTo(170, 740);
context.quadraticCurveTo(100, 750, 240, 813);
context.quadraticCurveTo(120, 750, 176, 750);
context.lineTo(291, 500);
context.quadraticCurveTo(295, 370, 385, 395);
context.lineWidth = 5;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(280, 500);
context.lineTo(291, 500);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.moveTo(170, 740);
context.lineTo(176, 750);
context.lineWidth = 3;
context.stroke();
context.restore();
// Mask - inner side right
context.beginPath();
context.moveTo(631, 387);
context.quadraticCurveTo(710, 360, 720, 500);
context.lineTo(830, 740);
context.quadraticCurveTo(900, 750, 760, 813);
context.quadraticCurveTo(880, 750, 824, 750);
context.lineTo(709, 500);
context.quadraticCurveTo(705, 370, 615, 395);
context.lineWidth = 5;
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(720, 500);
context.lineTo(709, 500);
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(830, 740);
context.lineTo(824, 750);
context.lineWidth = 3;
context.stroke();
context.restore();
// Mask - chic left
context.beginPath();
context.moveTo(470, 490);
context.lineTo(350, 500);
context.quadraticCurveTo(330, 540, 300, 570);
context.quadraticCurveTo(350, 620, 370, 730);
context.quadraticCurveTo(500, 680, 470, 490);
context.closePath();
context.lineWidth = 10;
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(480, 485);
context.quadraticCurveTo(410, 550, 430, 600);
context.lineTo(372, 650);
context.lineTo(372, 720);
context.lineTo(480, 580);
context.closePath();
context.fillStyle = "#525e74";
context.fill();
context.beginPath();
context.moveTo(320, 545);
context.quadraticCurveTo(356, 570, 356, 630);
context.lineTo(280, 570);
context.closePath();
context.fill();
context.beginPath();
context.arc(326, 574, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(326, 586, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(338, 586, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(374, 586, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#d6deeb";
context.fill();
context.beginPath();
context.arc(374, 598, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(338, 598, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(386, 646, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(386, 658, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
// Mask - chic left detail
context.beginPath();
context.moveTo(298, 570);
context.quadraticCurveTo(360, 640, 375, 650);
context.lineTo(375, 730);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(375, 650);
context.quadraticCurveTo(430, 610, 475, 550);
context.lineWidth = 5;
context.stroke();
// Mask - chic right
context.beginPath();
context.moveTo(530, 490);
context.lineTo(650, 500);
context.quadraticCurveTo(670, 540, 700, 570);
context.quadraticCurveTo(650, 620, 630, 730);
context.quadraticCurveTo(500, 680, 530, 490);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#525e74";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(680, 545);
context.quadraticCurveTo(644, 570, 644, 630);
context.lineTo(720, 570);
context.closePath();
context.fillStyle = "#2f3447";
context.fill();
context.beginPath();
context.arc(536, 504, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(548, 516, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(536, 516, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(536, 528, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(596, 540, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#d6deeb";
context.fill();
context.beginPath();
context.arc(608, 540, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(620, 540, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(608, 552, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(536, 574, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(536, 586, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(548, 586, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(548, 598, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(560, 622, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
// Mask - chic right detail
context.beginPath();
context.moveTo(702, 570);
context.quadraticCurveTo(640, 640, 625, 650);
context.lineTo(625, 730);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(625, 650);
context.quadraticCurveTo(570, 610, 525, 550);
context.lineWidth = 5;
context.stroke();
// Mask - Eyes left
context.beginPath();
context.moveTo(470, 490);
context.quadraticCurveTo(400, 530, 340, 500);
context.quadraticCurveTo(320, 420, 470, 430);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#314085";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(360, 440);
context.quadraticCurveTo(375, 510, 420, 530);
context.quadraticCurveTo(390, 475, 420, 415);
context.closePath();
context.fillStyle = "#58b1ed";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(360, 440);
context.quadraticCurveTo(360, 475, 370, 470);
context.lineTo(390, 470);
context.lineTo(390, 420);
context.closePath();
context.fillStyle = "#466eb4";
context.fill();
context.beginPath();
context.moveTo(383, 475);
context.lineTo(383, 450);
context.lineWidth = 5;
context.strokeStyle = "#58b1ed";
context.stroke();
context.restore();
context.beginPath();
context.arc(438, 448, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(438, 460, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(450, 460, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(450, 472, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#fff";
context.fill();
context.restore();
// Mask - Eyes left detail top back
context.beginPath();
context.moveTo(435, 425);
context.quadraticCurveTo(325, 420, 350, 505);
context.lineTo(335, 510);
context.quadraticCurveTo(280, 410, 385, 395);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#d6deeb";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(385, 395);
context.quadraticCurveTo(300, 420, 350, 510);
context.lineTo(420, 510);
context.lineTo(420, 395);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.restore();
// Mask - Eyes left detail top
context.beginPath();
context.moveTo(435, 425);
context.quadraticCurveTo(325, 420, 350, 505);
context.lineTo(350, 510);
context.quadraticCurveTo(310, 420, 410, 415);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#2f3447";
context.stroke();
context.fill();
// Mask - Eyes left detail bottom
context.beginPath();
context.moveTo(470, 480);
context.quadraticCurveTo(400, 530, 340, 490);
context.lineTo(320, 510);
context.quadraticCurveTo(410, 555, 470, 490);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(470, 480);
context.quadraticCurveTo(400, 530, 340, 490);
context.lineTo(320, 495);
context.quadraticCurveTo(395, 535, 460, 490);
context.closePath();
context.fillStyle = "#d6deeb";
context.fill();
context.restore();
// Mask - Eyes right
context.beginPath();
context.moveTo(530, 490);
context.quadraticCurveTo(600, 530, 660, 500);
context.quadraticCurveTo(680, 420, 530, 430);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#314085";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(580, 470);
context.lineTo(580, 530);
context.lineTo(620, 530);
context.quadraticCurveTo(605, 500, 615, 470);
context.closePath();
context.fillStyle = "#58b1ed";
context.fill();
context.beginPath();
context.moveTo(596, 475);
context.lineTo(610, 475);
context.lineWidth = 5;
context.strokeStyle = "#466eb4";
context.stroke();
context.beginPath();
context.moveTo(585, 472);
context.lineTo(585, 495);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(589, 472);
context.lineTo(589, 490);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.arc(570, 470, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.beginPath();
context.arc(570, 482, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
// Mask - Eyes right detail top back
context.beginPath();
context.moveTo(565, 425);
context.quadraticCurveTo(675, 420, 650, 505);
context.lineTo(665, 510);
context.quadraticCurveTo(720, 410, 615, 395);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(615, 395);
context.quadraticCurveTo(700, 420, 650, 510);
context.lineTo(580, 510);
context.lineTo(580, 395);
context.closePath();
context.fillStyle = "#525e74";
context.fill();
context.restore();
// Mask - Eyes right detail top
context.beginPath();
context.moveTo(565, 425);
context.quadraticCurveTo(675, 420, 650, 505);
context.lineTo(650, 510);
context.quadraticCurveTo(690, 420, 590, 415);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#2f3447";
context.stroke();
context.fill();
// Mask - Eyes right detail bottom
context.beginPath();
context.moveTo(530, 480);
context.quadraticCurveTo(600, 530, 660, 490);
context.lineTo(680, 510);
context.quadraticCurveTo(590, 555, 530, 490);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(530, 480);
context.quadraticCurveTo(600, 530, 660, 490);
context.lineTo(680, 495);
context.quadraticCurveTo(605, 535, 540, 490);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.restore();
// Mask - sopraciglia left
context.lineJoin = "miter";
context.beginPath();
context.moveTo(470, 420);
context.quadraticCurveTo(270, 250, 228, 450);
context.quadraticCurveTo(290, 300, 470, 450);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#d6deeb";
context.stroke();
context.fill();
// Clip for hightlight
context.save();
context.clip();
context.beginPath();
context.moveTo(500, 450);
context.quadraticCurveTo(270, 260, 228, 450);
context.lineTo(500, 450);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(500, 450);
context.quadraticCurveTo(270, 260, 228, 450);
context.quadraticCurveTo(270, 260, 500, 470);
context.closePath();
context.fillStyle = "#525e74";
context.fill();
context.restore();
context.beginPath();
context.moveTo(300, 380);
context.quadraticCurveTo(290, 350, 315, 340);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(420, 378);
context.quadraticCurveTo(445, 400, 445, 415);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(310, 380);
context.quadraticCurveTo(310, 355, 325, 350);
context.lineWidth = 5;
context.stroke();
context.restore();
// Mask - sopraciglia right
context.beginPath();
context.moveTo(530, 420);
context.quadraticCurveTo(730, 250, 768, 450);
context.quadraticCurveTo(710, 300, 530, 450);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
// Clip for hightlight
context.save();
context.clip();
context.beginPath();
context.moveTo(500, 450);
context.quadraticCurveTo(730, 260, 772, 450);
context.lineTo(500, 450);
context.closePath();
context.fillStyle = "#525e74";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(500, 450);
context.quadraticCurveTo(730, 260, 772, 450);
context.quadraticCurveTo(730, 260, 500, 470);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.restore();
context.beginPath();
context.moveTo(700, 380);
context.quadraticCurveTo(710, 350, 675, 340);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(580, 378);
context.quadraticCurveTo(555, 400, 555, 415);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(690, 380);
context.quadraticCurveTo(690, 355, 675, 350);
context.lineWidth = 5;
context.stroke();
context.restore();
// Mask - middle
context.lineJoin = "round";
context.beginPath();
context.moveTo(470, 130);
context.bezierCurveTo(470, 100, 530, 100, 530, 130);
context.lineTo(530, 430);
context.bezierCurveTo(530, 460, 470, 460, 470, 430);
context.lineTo(470, 430);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#d6deeb";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(470, 150);
context.lineTo(470, 330);
context.quadraticCurveTo(500, 330, 490, 480);
context.lineTo(530, 480);
context.lineTo(530, 150);
context.arc(500, 150, 30, 0, Math.PI, true);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(485, 400);
context.lineTo(485, 480);
context.lineTo(530, 480);
context.lineTo(530, 100);
context.lineTo(470, 100);
context.lineTo(470, 200);
context.quadraticCurveTo(485, 200, 485, 260);
context.quadraticCurveTo(485, 320, 510, 320);
context.lineTo(510, 360);
context.quadraticCurveTo(510, 400, 485, 400);
context.closePath();
context.fillStyle = "#53637d";
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(510, 480);
context.lineTo(530, 480);
context.lineTo(530, 160);
context.quadraticCurveTo(510, 160, 510, 180);
context.lineTo(510, 200);
context.quadraticCurveTo(525, 200, 525, 300);
context.lineTo(525, 400);
context.quadraticCurveTo(525, 480, 510, 480);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.restore();
context.restore();
context.beginPath();
context.moveTo(470, 145);
context.lineTo(490, 145);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(470, 160);
context.lineTo(500, 160);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(470, 200);
context.lineTo(480, 200);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(470, 360);
context.lineTo(480, 360);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(470, 375);
context.lineTo(480, 375);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.arc(520, 426, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#230000";
context.fill();
context.beginPath();
context.arc(520, 438, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
// Mask - nose mid
context.beginPath();
context.moveTo(470, 452);
context.quadraticCurveTo(480, 500, 474, 550);
context.lineTo(526, 550);
context.quadraticCurveTo(520, 500, 530, 452);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#d6deeb";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(490, 460);
context.lineTo(490, 474);
context.lineTo(495, 474);
context.lineTo(495, 488);
context.lineTo(500, 488);
context.lineTo(500, 505);
context.lineTo(510, 505);
context.lineTo(510, 530);
context.lineTo(540, 530);
context.lineTo(540, 460);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.moveTo(510, 460);
context.lineTo(510, 474);
context.lineTo(515, 474);
context.lineTo(515, 492);
context.lineTo(518, 492);
context.lineTo(518, 510);
context.lineTo(520, 510);
context.lineTo(520, 530);
context.lineTo(540, 530);
context.lineTo(540, 460);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.restore();
// Mask - triangle external bottom
context.lineJoin = "round";
context.beginPath();
context.moveTo(370, 730);
context.lineTo(630, 730);
context.lineTo(500, 820);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#525e74";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(370, 730);
context.lineTo(370, 820);
context.lineTo(500, 880);
context.lineTo(420, 730);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.moveTo(470, 730);
context.lineTo(560, 880);
context.lineTo(630, 880);
context.lineTo(630, 730);
context.closePath();
context.fillStyle = "#2f3447";
context.fill();
context.restore();
// Mask - triangle inner clip() bottom
context.beginPath();
context.moveTo(410, 745);
context.lineTo(590, 745);
context.lineTo(500, 805);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(400, 770);
context.lineTo(400, 810);
context.lineTo(600, 810);
context.lineTo(600, 770);
context.closePath();
context.fillStyle = "#525e74";
context.fill();
context.beginPath();
context.moveTo(415, 730);
context.lineTo(450, 810);
context.lineWidth = 5;
context.strokeStyle = "#230000";
context.stroke();
context.beginPath();
context.moveTo(435, 730);
context.lineTo(465, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(455, 730);
context.lineTo(475, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(475, 730);
context.lineTo(485, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(490, 730);
context.lineTo(495, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(510, 730);
context.lineTo(505, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(525, 730);
context.lineTo(515, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(545, 730);
context.lineTo(525, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(565, 730);
context.lineTo(535, 810);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(585, 730);
context.lineTo(550, 810);
context.lineWidth = 5;
context.stroke();
context.restore();
// Mask - triangle external
context.beginPath();
context.moveTo(370, 730);
context.lineTo(630, 730);
context.lineTo(500, 560);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#525e74";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(380, 560);
context.lineTo(470, 730);
context.lineTo(630, 730);
context.lineTo(630, 560);
context.closePath();
context.fillStyle = "#2f3447";
context.fill();
context.restore();
// Mask - triangle inner clip()
context.beginPath();
context.moveTo(390, 720);
context.lineTo(610, 720);
context.lineTo(500, 580);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
context.save();
context.clip();
// Mask - triangle inner masked
context.beginPath();
context.moveTo(430, 700);
context.lineTo(570, 700);
context.lineTo(570, 500);
context.lineTo(430, 500);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#d6deeb";
context.stroke();
context.fill();
context.beginPath();
context.moveTo(430, 500);
context.lineTo(430, 655);
context.lineTo(440, 655);
context.lineTo(440, 660);
context.lineTo(455, 660);
context.lineTo(455, 665);
context.lineTo(470, 665);
context.lineTo(470, 675);
context.lineTo(486, 675);
context.lineTo(486, 680);
context.lineTo(530, 680);
context.lineTo(530, 675);
context.lineTo(545, 675);
context.lineTo(545, 670);
context.lineTo(560, 670);
context.lineTo(560, 665);
context.lineTo(570, 665);
context.lineTo(570, 500);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.moveTo(430, 500);
context.lineTo(430, 645);
context.lineTo(440, 645);
context.lineTo(440, 650);
context.lineTo(455, 650);
context.lineTo(455, 655);
context.lineTo(470, 655);
context.lineTo(470, 660);
context.lineTo(486, 660);
context.lineTo(486, 645);
context.lineTo(530, 645);
context.lineTo(530, 635);
context.lineTo(545, 635);
context.lineTo(545, 625);
context.lineTo(560, 625);
context.lineTo(560, 615);
context.lineTo(570, 615);
context.lineTo(570, 500);
context.closePath();
context.fillStyle = "#525e74";
context.fill();
context.beginPath();
context.moveTo(440, 700);
context.lineTo(440, 500);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(455, 700);
context.lineTo(455, 500);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(470, 700);
context.lineTo(470, 500);
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(481, 615);
context.lineTo(481, 500);
context.lineWidth = 5;
context.strokeStyle = "#2f3447";
context.stroke();
context.beginPath();
context.moveTo(486, 700);
context.lineTo(486, 500);
context.lineWidth = 5;
context.strokeStyle = "#230000";
context.stroke();
context.beginPath();
context.moveTo(509, 625);
context.lineTo(509, 500);
context.lineWidth = 5;
context.strokeStyle = "#2f3447";
context.stroke();
context.beginPath();
context.moveTo(514, 700);
context.lineTo(514, 500);
context.lineWidth = 5;
context.strokeStyle = "#230000";
context.stroke();
context.beginPath();
context.moveTo(525, 640);
context.lineTo(525, 500);
context.lineWidth = 5;
context.strokeStyle = "#2f3447";
context.stroke();
context.beginPath();
context.moveTo(530, 700);
context.lineTo(530, 500);
context.lineWidth = 5;
context.strokeStyle = "#230000";
context.stroke();
context.beginPath();
context.moveTo(540, 655);
context.lineTo(540, 500);
context.lineWidth = 5;
context.strokeStyle = "#2f3447";
context.stroke();
context.beginPath();
context.moveTo(545, 700);
context.lineTo(545, 500);
context.lineWidth = 5;
context.strokeStyle = "#230000";
context.stroke();
context.beginPath();
context.moveTo(555, 675);
context.lineTo(555, 500);
context.lineWidth = 5;
context.strokeStyle = "#2f3447";
context.stroke();
context.beginPath();
context.moveTo(560, 700);
context.lineTo(560, 500);
context.lineWidth = 5;
context.strokeStyle = "#230000";
context.stroke();
context.beginPath();
context.moveTo(569, 700);
context.lineTo(569, 500);
context.lineWidth = 5;
context.strokeStyle = "#2f3447";
context.stroke();
context.restore();
// Mask - nose top
context.beginPath();
context.moveTo(465, 452);
context.bezierCurveTo(465, 465, 535, 465, 535, 452);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#d6deeb";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(500, 452);
context.lineTo(500, 465);
context.lineTo(540, 465);
context.lineTo(540, 452);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.moveTo(520, 452);
context.lineTo(520, 465);
context.lineTo(540, 465);
context.lineTo(540, 452);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.restore();
// Mask - nose external
context.beginPath();
context.arc(500, 550, 26, 0, Math.PI, true);
context.lineTo(474, 580);
context.lineTo(526, 580);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#7489a6";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(535, 510);
context.lineTo(465, 590);
context.lineTo(535, 590);
context.closePath();
context.fillStyle = "#454f68";
context.fill();
context.restore();
// Mask - nose
context.lineJoin = "round";
context.beginPath();
context.arc(500, 550, 14, 0, Math.PI, true);
context.lineTo(486, 570);
context.lineTo(514, 570);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "#d6deeb";
context.stroke();
context.fill();
context.save();
context.clip();
context.beginPath();
context.moveTo(530, 530);
context.quadraticCurveTo(485, 530, 495, 600);
context.lineTo(530, 600);
context.closePath();
context.fillStyle = "#7489a6";
context.fill();
context.beginPath();
context.arc(508, 550, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fillStyle = "#d6deeb";
context.fill();
context.beginPath();
context.arc(508, 562, 4, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
context.restore();
// Mask - nose detail
context.beginPath();
context.arc(500, 500, 27, 0, Math.PI, true);
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.arc(500, 515, 27, 0, Math.PI, true);
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.arc(500, 530, 27, 0, Math.PI, true);
context.lineWidth = 4;
context.stroke();
// Mask - line circle back left
context.beginPath();
context.moveTo(366, 740);
context.lineTo(310, 680);
context.lineWidth = 5;
context.strokeStyle = "#200f15";
context.stroke();
context.beginPath();
context.moveTo(366, 730);
context.lineTo(310, 670);
context.lineWidth = 5;
context.strokeStyle = "#7489a6";
context.stroke();
// Mask - line circle back right
context.beginPath();
context.moveTo(634, 740);
context.lineTo(690, 680);
context.lineWidth = 5;
context.strokeStyle = "#200f15";
context.stroke();
context.beginPath();
context.moveTo(634, 730);
context.lineTo(690, 670);
context.lineWidth = 5;
context.strokeStyle = "#7489a6";
context.stroke();
// Mask - triangle circle left
context.beginPath();
context.arc(366, 730, 8, 0, 2 * Math.PI, true);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "#230000";
context.stroke();
context.fill();
// Mask - triangle circle right
context.beginPath();
context.arc(634, 730, 8, 0, 2 * Math.PI, true);
context.closePath();
context.lineWidth = 10;
context.stroke();
context.fill();
};