mob-4

In this example below you will see how to do a mob-4 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by collector, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright collector ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>mob-4</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="canvas">
  <div class="product-box"></div>
</canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/collector/mob-4-ypBpzB */
body{
  margin: 0;
}

#canvas{
/*   border: 1px solid #dedede; */
}

.product-box {
  background-color: #000;
}

/*Downloaded from https://www.codeseek.co/collector/mob-4-ypBpzB */
function draw() {
  
  var canvas = document.getElementById('canvas')
  canvas.width = 558;
  canvas.height = 464;
  canvas.style.width = "279px";
  canvas.style.height = "232px";
  var width = 558;
  var height = 464;
  var ctx = canvas.getContext('2d');
  window.requestAnimFrame = (function () {
    		return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
    		window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
    		window.msRequestAnimationFrame || function ( /* function */ callback, /* DOMElement */ element) {
       			window.setTimeout(callback, 1000 / 20);
  
  		};
		})();

  		var leftHand = {
		    lTx1: 192,
		    lTy1: 182,
		    lTx2: 191,
		    lTy2: 269,
		    lTx3: 149,
		    lTy3: 270
  		};

  		var rightHand = {
		    lTx1: 406,
		    lTy1: 182,
		    lTx2: 410,
		    lTy2: 272,
		    lTx3: 453,
		    lTy3: 272
  		};

  		var circle1 = {
		    x: 144,
		    y: 265
		    // x: 121,
		    // y: 180,
  		};

  		var circle1Copy = {
		    // x: 144,
		    // y: 265
		    x: 121,
		    y: 180,
  		};

  		var circle2 = {
		    x: 188,
		    y: 267,
		    // x: 161,
		    // y: 204,
  		};

  		var circle3 = {
		    x: 194,
		    y: 177,
		    // x: 188,
		    // y: 130,
  		};

  		var circle4 = {
		    x: 460,
		    y: 265,
		    // x: 484,
		    // y: 178,
  		};

  		var circle5 = {
		    x: 411,
		    y: 268,
		    // x: 440,
		    // y: 196,
  		};

  		 var circle6 = {
		    x: 405,
		    y: 178,
		    // x: 408,
		    // y: 128,
  		};

  		var magnifierBezel = {
  			x: 81,
  			y: 236,
  			// x: 54,
  			// y: 196,
  		};

  		var bigHandel = {
  			x: 118,
  			y: 253,
  			lTx: 145.5,
  			lTy: 265
  			// x: 92,
  			// y: 184,
  			// lTx: 119,
  			// lTy: 173
  		};


  		var smallHandel = {
  			x: 102,
  			y: 247,
  			lTx: 146,
  			lTy: 264
  			// x: 78,
  			// y: 188,
  			// lTx: 116,
  			// lTy: 180
  		};

  		var magnifierGlass = {
  			x: 86,
  			y: 241,
  			// x: 60,
  			// y: 199,
  		};
  		
  		var finger1 = {
			mTx: 448.2,
			mTy: 251,
			cT1: 447.7,
			cT2: 248.6,
			cT3: 445.5,
			cT4: 243.5,
			cT5: 449.59999999999997,
			cT6: 239.7
		};
		
		var finger2 = {
			mTx: 468.5,
			mTy: 252,
			cT1: 468.5,
			cT2: 252,
			cT3: 476.5,
			cT4: 245.2,
			cT5: 474.3,
			cT6: 238.5
		};

		var finger3 = {
			mTx: 474.8,
			mTy: 256.1,
			cT1: 474.8,
			cT2: 256.1,
			cT3: 485.7,
			cT4: 254.90000000000003,
			cT5: 486.1,
			cT6: 245.20000000000002
		};

		var leftEyeMask = {
			mTy: 128.2,
			lTy1: 122.2,
			lTy2: 148.8,
			lTy3: 148.8,
			lTy4: 128.2
		};

		var rightEyeMask = {
			mTy: 123.2,
			lTy1: 128.2,
			lTy2: 147.8,
			lTy3: 147.8,
			lTy4: 123.2
		};
  
    var rightEye = {
      b1Ct1: 287,
      b1Ct2: 129.2,
      b1Ct3: 289.4,
      b1Ct4: 127.6,

      b2Ct1: 290.79999999999995,
      b2Ct2: 126.6,
      b2Ct3: 292.59999999999997,
      b2Ct4: 126,
      b2Ct5: 294.5,
      b2Ct6: 126,

      b3Ct1: 296.4,
      b3Ct2: 126,
      b3Ct3: 298.1,
      b3Ct4: 125.6,
      b3Ct5: 299.5,
      b3Ct6: 127.5,

      b4Ct1: 301.9,
      b4Ct2: 129.2,
      b4Ct3: 303.5,
      b4Ct4: 131.9,
      b4Ct5: 303.5,
      b4Ct6: 135
    }
    var leftEye = {
			b1Ct1: 140, b1Ct2: 254.5, b1Ct3: 144, b1Ct4: 249.5, b1Ct5: 144,
 			b2Ct1: 244.5, b2Ct2: 144, b2Ct3: 240.5, b2Ct4: 140, b2Ct5: 240.5,b2Ct6: 135,
 			b3Ct1: 240.5, b3Ct2: 131.9, b3Ct3: 242, b3Ct4: 129.2, b3Ct5: 244.4, b3Ct6: 127.6,
 			b4Ct1: 245.8, b4Ct2: 126.6, b4Ct3: 247.6, b4Ct4: 126, b4Ct5: 249.5, b4Ct6: 126,
 			b5Ct1: 251, b5Ct2: 126, b5Ct3: 253.1, b5Ct4: 126.6, b5Ct5: 254.5, b5Ct6: 127.5,
			b6Ct1: 256.9, b6Ct2: 129.2, b6Ct3: 258.5, b6Ct4: 131.9, b6Ct5: 258.5, b6Ct6: 135
 		};
  
  

  
		var counterTween = 0;
  	var delay = 450;

      

      


  		tweenStart();
      // setTimeout(tweenBack, 1000);
  		function tweenStart(){
		    	
		    	tween(circle1, {x: 121, y: 180}, 1000, easeInOutQuad);
		    	tween(circle2, {x: 161, y: 200}, 1000, easeInOutQuad);
		    	tween(circle3, {x: 188, y: 130}, 1000, easeInOutQuad);
		    	tween(magnifierBezel, {x: 54, y: 196}, 1000, easeInOutQuad);
		    	tween(bigHandel, {x: 92, y: 184, lTx: 119, lTy: 173}, 1000, easeInOutQuad);
		    	tween(smallHandel, {x: 78, y: 188, lTx: 116, lTy: 180}, 1000, easeInOutQuad);
		    	tween(magnifierGlass, {x: 60, y: 199}, 1000, easeInOutQuad);

		    	tween(rightHand, {lTx1: 405, lTy1: 126, lTx2: 440, lTy2: 202, lTx3: 477, lTy3: 184}, 1000, easeInOutQuad);
		    	tween(circle4, {x: 484, y: 178}, 1000, easeInOutQuad);
		    	tween(circle5, {x: 440, y: 196}, 1000, easeInOutQuad);
		    	tween(circle6, {x: 408, y: 128}, 1000, easeInOutQuad);
		    	// tween(mask, {y: 132}, 1000, easeInOutQuad);
		    	tween(rightEye,   {b1Ct1: 286.2, b1Ct2: 131.6, b1Ct3: 286, b1Ct4: 131.6,b2Ct1: 286.2, b2Ct2: 131.6,b2Ct3: 290, b2Ct4: 132.5,b2Ct5: 292.5, b2Ct6: 133.2,b3Ct1: 295, b3Ct2: 135, b3Ct3: 295, b3Ct4: 134, b3Ct5: 298.1, b3Ct6: 134.3,b4Ct1: 302, b3Ct2: 134.7, b3Ct3: 303.5, b3Ct4: 135, b3Ct5: 303.5, b3Ct6: 135}, 1000, easeInOutQuad);
		    	tween(leftEye, {b1Ct1: 140.8, b1Ct2: 253.1, b1Ct3: 145.2, b1Ct4: 247.1, b1Ct5: 143.7,b2Ct1: 243.2, b2Ct2: 142.7, b2Ct3: 240.5, b2Ct4: 139.1, b2Ct5: 240.5, b2Ct6: 135.1, b3Ct1: 240.5, b3Ct2: 135.1, b3Ct3: 241.9, b3Ct4: 134.7, b3Ct5: 244.5, b3Ct6: 134.1, b4Ct1: 245.6, b4Ct2: 133.9, b4Ct3: 247.8, b4Ct4: 133.5, b4Ct5: 249.9, b4Ct6: 133.2, b5Ct1: 252.70000000000002, b5Ct2: 132.79999999999998, b5Ct3: 256.7, b5Ct4: 132.5, b5Ct5: 257.9, b5Ct6: 132.29999999999998, b6Ct1: 257.9, b6Ct2: 132.2, b6Ct3: 258.5, b6Ct4: 132.2, b6Ct5: 258.5, b6Ct6: 135}, 1000, easeInOutQuad);
        

		    	


				
		    	tween(finger1, {mTx: 481.2, mTy: 162.9, cT1: 482.2, cT2: 160.70000000000002, cT3: 483.5, cT4: 155.3, cT5: 489, cT6: 154.6}, 1000, easeInOutQuad, render);
		    	tween(finger2, {mTx: 497, mTy: 175.7, cT1: 497, cT2: 175.7, cT3: 507.5, cT4: 175, cT5: 509.7, cT6: 168.29999999999998}, 1000, easeInOutQuad, render);
		    	tween(finger3, {mTx: 499.6, mTy: 182.7, cT1: 499.6, cT2: 182.7, cT3: 509.1, cT4: 188.2, cT5: 515.2, cT6: 180.6}, 1000, easeInOutQuad, render);
		    	

		    	tween(leftHand, {lTx1: 186, lTy1: 128, lTx2: 161, lTy2: 206, lTx3: 116, lTy3: 181}, 1000, easeInOutQuad);
         	tween(leftEyeMask, {mTy: 138.2, lTy1: 132.2, lTy2: 158, lTy3: 158, lTy4: 138.2}, 1000, easeInOutQuad);
		    	tween(rightEyeMask, {mTy: 133.2, lTy1: 138.2, lTy2: 157.8, lTy3: 157.8, lTy4: 133.2}, 1000, easeInOutQuad );
      setTimeout(tweenBack, 3500);
		  
		 
  		}

  
		function tweenBack(){
		    // setTimeout(function(){
		    	
		    	tween(circle1, {x: 144, y: 265}, 1000, easeInOutQuad);
		    	tween(circle2, {x: 188, y: 265}, 1000, easeInOutQuad);
		    	tween(circle3, {x: 194, y: 177}, 1000, easeInOutQuad);
		    	tween(magnifierBezel, {x: 81, y: 236}, 1000, easeInOutQuad);
		    	tween(bigHandel, {x: 118, y: 253, lTx: 145.5, lTy: 265}, 1000, easeInOutQuad);
		    	tween(smallHandel, {x: 102, y: 247, lTx: 146, lTy: 264}, 1000, easeInOutQuad);
		    	tween(magnifierGlass, {x: 86, y: 241}, 1000, easeInOutQuad);

		    	tween(rightHand, {lTx1: 406, lTy1: 182, lTx2: 410, lTy2: 272, lTx3: 453, lTy3: 272 }, 1000, easeInOutQuad);
		    	tween(circle4, {x: 460, y: 265}, 1000, easeInOutQuad);
		    	tween(circle5, {x: 411, y: 268}, 1000, easeInOutQuad);
		    	tween(circle6, {x: 405, y: 178}, 1000, easeInOutQuad);
		    	// tween(mask, {y: 122}, 1000, easeInOutQuad);
          tween(rightEye, {b1Ct1: 287, b1Ct2: 129.2, b1Ct3: 289.4, b1Ct4: 127.6, b2Ct1: 290.79999999999995, b2Ct2: 126.6, b2Ct3: 292.59999999999997, b2Ct4: 126, b2Ct5: 294.5, b2Ct6: 126, b3Ct1: 296.4, b3Ct2: 126, b3Ct3: 298.1, b3Ct4: 125.6, b3Ct5: 299.5, b3Ct6: 127.5, b4Ct1: 301.9, b4Ct2: 129.2, b4Ct3: 303.5,b4Ct4: 131.9,b4Ct5: 303.5,b4Ct6: 135}, 1000, easeInOutQuad);
		    	tween(leftEye, {b1Ct1: 140, b1Ct2: 254.5, b1Ct3: 144, b1Ct4: 249.5, b1Ct5: 144,b2Ct1: 244.5, b2Ct2: 144, b2Ct3: 240.5, b2Ct4: 140, b2Ct5: 240.5,b2Ct6: 135, b3Ct1: 240.5, b3Ct2: 131.9, b3Ct3: 242, b3Ct4: 129.2, b3Ct5: 244.4, b3Ct6: 127.6, b4Ct1: 245.8, b4Ct2: 126.6, b4Ct3: 247.6, b4Ct4: 126, b4Ct5: 249.5, b4Ct6: 126, b5Ct1: 251, b5Ct2: 126, b5Ct3: 253.1, b5Ct4: 126.6, b5Ct5: 254.5, b5Ct6: 127.5, b6Ct1: 256.9, b6Ct2: 129.2, b6Ct3: 258.5, b6Ct4: 131.9, b6Ct5: 258.5, b6Ct6: 135}, 1000, easeInOutQuad);
          

		    	tween(finger1, {mTx: 448.2, mTy: 251, cT1: 447.7, cT2: 248.6, cT3: 445.5, cT4: 243.5, cT5: 449.59999999999997, cT6: 239.7}, 1000, easeInOutQuad, render);
		    	tween(finger2, {mTx: 468.5, mTy: 252, cT1: 468.5, cT2: 252, cT3: 476.5, cT4: 245.2, cT5: 474.3, cT6: 238.5}, 1000, easeInOutQuad, render);
		    	tween(finger3, {mTx: 474.8, mTy: 256.1, cT1: 474.8, cT2: 256.1, cT3: 485.7, cT4: 254.90000000000003, cT5: 486.1, cT6: 245.20000000000002}, 1000, easeInOutQuad, render);


		    	tween(leftHand, {lTx1: 192, lTy1: 182, lTx2: 191, lTy2: 270, lTx3: 149, lTy3: 270}, 1000, easeInOutQuad);
          	tween(leftEyeMask, {mTy: 128.2, lTy1: 122.2, lTy2: 148.8, lTy3: 148.8, lTy4: 128.2}, 1000, easeInOutQuad);
		    	tween(rightEyeMask, {mTy: 123.2, lTy1: 128.2, lTy2: 147.8, lTy3: 147.8, lTy4: 123.2}, 1000, easeInOutQuad);
          setTimeout(tweenStart, 3500);
		    // }, 3000);

		}
 
  		function tween(obj, props, duration, easingFun, onProgress, onComplite){
    		var starts = {},
	        changes = {},
	        startTime = new Date();
    
		    for (var prop in props){
		      starts[prop] = obj[prop];
		      changes[prop] = props[prop] - starts[prop];
		    }
    		update();
		    function update(){
		      var time = new Date() - startTime;
		      if(time < duration){
		        for(var prop in props){
		          obj[prop] = easingFun(time, starts[prop], changes[prop], duration);
		        }
		         if (onProgress){onProgress()};
		        requestAnimFrame(update);
		      }
		      else{
		          time = duration;
		          for(var prop in props){
		            obj[prop] = easingFun(time, starts[prop], changes[prop], duration);
		        }
		        if (onComplite) {onComplite()};
		      }
		      // ctx.clearRect(0, 0, width, height);
		      render();

		    }
  		}

  		render();
      function drawRotatedRect(x, y, width, height, degrees) {
        ctx.save();
        ctx.beginPath();
        ctx.translate(x + width / 2, y + height / 2);
        ctx.rotate(degrees * Math.PI / 180);
        ctx.rect(-width / 2, -height / 2, width, height);
        // ctx.fillStyle = "gold";
        ctx.fillStyle="rgba(0,0,0,0)";
        ctx.fill();
        
        // ctx.restore();
        // ctx.clip();
        ctx.restore();
        ctx.save();
        ctx.clip();
        
        
        
        
      }
  
      
      
  		// ROBOT
function render(){

  		ctx.clearRect(0, 0, width, height);

			ctx.save();
			ctx.miterLimit=4;
			ctx.scale(1,1);
			ctx.translate(0,0);
			ctx.save();
			ctx.restore();

  
			ctx.strokeStyle="#D6D6D6";
			ctx.lineWidth=2.3411;
			ctx.lineCap="round";
			ctx.miterLimit="10";
			ctx.beginPath();
			ctx.moveTo(498.9,158.7);
			ctx.lineTo(498.9,176.6);
			ctx.moveTo(490,167.6);
			ctx.lineTo(507.9,167.6);
			ctx.moveTo(114.8,43.6);
			ctx.lineTo(114.3,61.5);
			ctx.moveTo(105.6,52.3);
			ctx.lineTo(123.5,52.8);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			ctx.strokeStyle="#D6D6D6";
			ctx.lineWidth=1.6304;
			ctx.lineCap="round";
			ctx.miterLimit="10";
			ctx.beginPath();
			ctx.moveTo(54.1,113.6);
			ctx.lineTo(54.1,126.19999999999999);
			ctx.moveTo(47.9,119.9);
			ctx.lineTo(60.5,119.9);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			ctx.strokeStyle="#D6D6D6";
			ctx.lineWidth=1.2805;
			ctx.lineCap="round";
			ctx.miterLimit="10";
			ctx.beginPath();
			ctx.moveTo(451.6,109.9);
			ctx.lineTo(451.6,116.9);
			ctx.moveTo(448.2,113.3);
			ctx.lineTo(455.2,113.3);
			ctx.moveTo(411.1,31.7);
			ctx.lineTo(411.1,42.8);
			ctx.moveTo(405.7,37.5);
			ctx.lineTo(416.09999999999997,37.5);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			ctx.save();
			ctx.fillStyle="#D6D6D6";
			ctx.beginPath();
			ctx.moveTo(292.7,270.3);
			ctx.bezierCurveTo(364.8283883279016,270.3,423.29999999999995,273.4340067511845,423.29999999999995,277.3);
			ctx.bezierCurveTo(423.29999999999995,281.16599324881554,364.8283883279016,284.3,292.7,284.3);
			ctx.bezierCurveTo(220.57161167209836,284.3,162.1,281.16599324881554,162.1,277.3);
			ctx.bezierCurveTo(162.1,273.4340067511845,220.57161167209836,270.3,292.7,270.3);
			ctx.closePath();
			ctx.fill();
			ctx.restore();
			ctx.save();

      
  		ctx.beginPath();
      ctx.strokeStyle="#8E6383";
      ctx.lineWidth=10;
      ctx.arc(240, 242, 30, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.fill();
      ctx.stroke();
      ctx.save();



			// left hand
			ctx.strokeStyle="#8E6383";
			ctx.lineWidth=9.278;
			ctx.lineJoin="round";
			ctx.beginPath();
			ctx.moveTo(247.6,133.2);
	   	ctx.lineTo(leftHand.lTx1, leftHand.lTy1);
    	ctx.lineTo(leftHand.lTx2, leftHand.lTy2);
   		ctx.lineTo(leftHand.lTx3,leftHand.lTy3);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			// magnofier glass
			ctx.beginPath();
		  ctx.arc(magnifierGlass.x, magnifierGlass.y, 20, 0, Math.PI * 2, false);
		  ctx.fillStyle="#9CDFEF";
		  ctx.fill();
		  ctx.save();


			// small handel of magnifier
			ctx.strokeStyle="#8E6383";
			ctx.lineWidth=6;
			ctx.beginPath();
			ctx.moveTo(smallHandel.x, smallHandel.y);
			ctx.lineTo(smallHandel.lTx, smallHandel.lTy);
			ctx.fill();
			ctx.stroke();
			ctx.restore();
			ctx.save();

			// big handel of magnifier
			ctx.strokeStyle="#8E6383";
			ctx.lineWidth=11;
			ctx.lineCap="round";
			ctx.miterLimit="10";
			ctx.beginPath();
			ctx.moveTo(bigHandel.x, bigHandel.y);
			ctx.lineTo(bigHandel.lTx, bigHandel.lTy);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			// circl1e 1
			ctx.beginPath();
      ctx.arc(circle1.x, circle1.y, 18, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.fill();
      ctx.save();


			
		    // circle 2

      ctx.beginPath();
      ctx.arc(circle2.x, circle2.y, 12, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.fill();
      ctx.save();



		    // circle 3
      ctx.beginPath();
      ctx.arc(circle3.x, circle3.y, 12, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.fill();
      ctx.save();



		   // magnifier bezel
		  ctx.beginPath();
		  ctx.arc(magnifierBezel.x, magnifierBezel.y, 26, 0, Math.PI * 2, false);
			ctx.strokeStyle="#8E6383";
			ctx.lineWidth=7;
      ctx.stroke();
      ctx.restore();
      ctx.save();


			ctx.fillStyle="#8E6383";
			ctx.beginPath();
			ctx.moveTo(338.4,93.3);
			ctx.lineTo(267.59999999999997,93.3);
			ctx.bezierCurveTo(250.69999999999996,93.3,236.19999999999996,104.6,231.89999999999998,120.8);
			ctx.lineTo(197.09999999999997,253.39999999999998);
			ctx.lineTo(399.69999999999993,253.39999999999998);
			ctx.lineTo(374.29999999999995,123.49999999999997);
			ctx.bezierCurveTo(371.2,105.9,356,93.3,338.4,93.3);
			ctx.fill();
			ctx.restore();
			ctx.save();



			ctx.fillStyle="#70547F";
			ctx.beginPath();
			ctx.moveTo(341,93.3);
			ctx.lineTo(326.5,93.3);
			ctx.lineTo(295.6,253.39999999999998);
			ctx.lineTo(399.90000000000003,253.39999999999998);
			ctx.lineTo(374.1,120.59999999999997);
			ctx.bezierCurveTo(371.2,104.7,357.2,93.3,341,93.3);
			ctx.fill();
			ctx.restore();
			ctx.save();


			ctx.fillStyle="#70547F";
			ctx.beginPath();
			ctx.moveTo(321.7,160.2);
			ctx.lineTo(221.5,160.2);
			ctx.lineTo(232.8,116.49999999999999);
			ctx.lineTo(321.70000000000005,116.49999999999999);
			ctx.bezierCurveTo(321.7,116.5,321.7,160.2,321.7,160.2);
			ctx.closePath();
			ctx.fill();
			ctx.restore();
			ctx.save();

			// all new right eye
      ctx.beginPath();
      ctx.fillStyle="#8E6383";
      ctx.moveTo(303.5,135);
      ctx.bezierCurveTo(303.5,140,299.5,144,294.5,144);
      ctx.bezierCurveTo(289.5,144,285.5,140,285.5,135);
      ctx.bezierCurveTo(285.5,131.9, rightEye.b1Ct1, rightEye.b1Ct2, rightEye.b1Ct3, rightEye.b1Ct4);
      ctx.bezierCurveTo(rightEye.b2Ct1, rightEye.b2Ct2, rightEye.b2Ct3, rightEye.b2Ct4, rightEye.b2Ct5, rightEye.b2Ct6);
      ctx.bezierCurveTo(rightEye.b3Ct1, rightEye.b3Ct2, rightEye.b3Ct3, rightEye.b3Ct4, rightEye.b3Ct5, rightEye.b3Ct6);
      ctx.bezierCurveTo(rightEye.b4Ct1, rightEye.b4Ct2, rightEye.b4Ct3, rightEye.b4Ct4, rightEye.b4Ct5, rightEye.b4Ct6);
      ctx.closePath();
      ctx.fill();
      ctx.save();


	    ctx.beginPath();
      ctx.fillStyle="#8E6383";
      ctx.moveTo(258.5,135);
			ctx.bezierCurveTo(258.5, leftEye.b1Ct1, leftEye.b1Ct2, leftEye.b1Ct3, leftEye.b1Ct4, leftEye.b1Ct5);
			ctx.bezierCurveTo(leftEye.b2Ct1, leftEye.b2Ct2, leftEye.b2Ct3, leftEye.b2Ct4, leftEye.b2Ct5, leftEye.b2Ct6);
			ctx.bezierCurveTo(leftEye.b3Ct1, leftEye.b3Ct2, leftEye.b3Ct3, leftEye.b3Ct4, leftEye.b3Ct5, leftEye.b3Ct6);
			ctx.bezierCurveTo(leftEye.b4Ct1, leftEye.b4Ct2, leftEye.b4Ct3, leftEye.b4Ct4, leftEye.b4Ct5, leftEye.b4Ct6);
			ctx.bezierCurveTo(leftEye.b5Ct1, leftEye.b5Ct2, leftEye.b5Ct3, leftEye.b5Ct4, leftEye.b5Ct5, leftEye.b5Ct6);
			ctx.bezierCurveTo(leftEye.b6Ct1, leftEye.b6Ct2, leftEye.b6Ct3, leftEye.b6Ct4, leftEye.b6Ct5, leftEye.b6Ct6);
			ctx.closePath();
			ctx.fill();
			ctx.save();



			ctx.fillStyle="#9B7591";
			ctx.beginPath();
			ctx.moveTo(201,238.9);
			ctx.lineTo(298.6,238.9);
			ctx.lineTo(295.5,253.1);
			ctx.lineTo(197.2,253.1);
			ctx.lineTo(201,238.9);
			ctx.closePath();
			ctx.fill();
			ctx.restore();
			ctx.save();


			ctx.fillStyle="#7F668C";
			ctx.beginPath();
			ctx.moveTo(298.5,238.9);
			ctx.lineTo(397,238.9);
			ctx.lineTo(399.9,253.1);
			ctx.lineTo(295.6,253.1);
			ctx.lineTo(298.5,238.9);
			ctx.closePath();
			ctx.fill();
			ctx.restore();
			ctx.save();



			ctx.strokeStyle="#634568";
			ctx.lineWidth=2.4283;
			ctx.beginPath();
			ctx.moveTo(344.2,238.9);
			ctx.bezierCurveTo(344.2,238.9,344.9,173.2,383.8,170.60000000000002);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			ctx.strokeStyle="#634568";
			ctx.lineWidth=2.4283;
			ctx.beginPath();
			ctx.moveTo(366.9,198.9);
			ctx.lineTo(389.4,198.9);
			ctx.stroke();
			ctx.restore();
			ctx.save();



			ctx.strokeStyle="#634568";
			ctx.lineWidth=2.4283;
			ctx.beginPath();
			ctx.moveTo(366.9,215);
			ctx.lineTo(392.5,215);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			ctx.fillStyle="#8E6383";
			ctx.beginPath();
			ctx.moveTo(315.4,246.2);
			ctx.bezierCurveTo(315.4,264.3,330.09999999999997,278.8,348,278.8);
			ctx.bezierCurveTo(365.9,278.8,380.6,264.1,380.6,246.20000000000002);
			ctx.bezierCurveTo(380.6,228.10000000000002,365.90000000000003,213.60000000000002,348,213.60000000000002);
			ctx.bezierCurveTo(330.1,213.6,315.4,228.3,315.4,246.2);
			ctx.fill();
			ctx.restore();
			ctx.save();


			ctx.fillStyle="#70547F";
			ctx.beginPath();
			ctx.moveTo(325.6,246.2);
			ctx.bezierCurveTo(325.6,258.5,335.5,268.4,347.8,268.4);
			ctx.bezierCurveTo(360.1,268.4,370,258.5,370,246.2);
			ctx.bezierCurveTo(370,233.89999999999998,360.1,224,347.8,224);
			ctx.bezierCurveTo(335.5,223.7,325.6,233.9,325.6,246.2);
			ctx.fill();
			ctx.restore();
			ctx.save();


			ctx.fillStyle="#8E6383";
			ctx.beginPath();
			ctx.moveTo(363.5,133.2);
			ctx.bezierCurveTo(363.5,140.7,357.2,147,349.7,147);
			ctx.bezierCurveTo(342.2,147,335.9,140.7,335.9,133.2);
			ctx.bezierCurveTo(335.9,125.69999999999999,342.2,119.39999999999999,349.7,119.39999999999999);
			ctx.bezierCurveTo(357.2,119.4,363.5,125.7,363.5,133.2);
			ctx.fill();
			ctx.restore();
			ctx.save();


			// right hand
			ctx.strokeStyle="#8E6383";
			ctx.lineWidth=9.5211;
			ctx.lineJoin="round";
			ctx.beginPath();
			ctx.moveTo(348.5,133.2);
			ctx.lineTo(rightHand.lTx1, rightHand.lTy1);
			ctx.lineTo(rightHand.lTx2, rightHand.lTy2);
			ctx.lineTo(rightHand.lTx3, rightHand.lTy3);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			// circle 5
			ctx.beginPath();
      ctx.arc(circle5.x, circle5.y, 12, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.fill();
      ctx.save();

		  // circle 6
      ctx.beginPath();
      ctx.arc(circle6.x, circle6.y, 12, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.fill();
      ctx.save();

			// finger 1
			ctx.strokeStyle="#70547F";
			ctx.lineWidth=7.8359;
			ctx.lineCap="round";
			ctx.lineJoin="round";
			ctx.miterLimit="10";
			ctx.beginPath();
			ctx.moveTo(finger1.mTx, finger1.mTy);
			ctx.bezierCurveTo(finger1.cT1, finger1.cT2, finger1.cT3, finger1.cT4, finger1.cT5, finger1.cT6);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			// finger 2
			ctx.strokeStyle="#70547F";
			ctx.lineWidth=7.8359;
			ctx.lineCap="round";
			ctx.lineJoin="round";
			ctx.miterLimit="10";
			ctx.beginPath();
			ctx.moveTo(finger2.mTx, finger2.mTy);
			ctx.bezierCurveTo(finger2.cT1, finger2.cT2, finger2.cT3, finger2.cT4, finger2.cT5, finger2.cT6);
			ctx.stroke();
			ctx.restore();
			ctx.save();


			// finger 3
			ctx.strokeStyle="#70547F";
			ctx.lineWidth=7.8359;
			ctx.lineCap="round";
			ctx.lineJoin="round";
			ctx.miterLimit="10";
			ctx.beginPath();
			ctx.moveTo(finger3.mTx, finger3.mTy);
			ctx.bezierCurveTo(finger3.cT1, finger3.cT2, finger3.cT3, finger3.cT4, finger3.cT5, finger3.cT6);
			ctx.stroke();
			ctx.restore();
			ctx.save();



			ctx.beginPath();
      ctx.arc(circle4.x, circle4.y, 18, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.fill();
      ctx.save();
        
      ctx.beginPath();
      ctx.strokeStyle="#8E6383";
      ctx.lineWidth=10;
      ctx.arc(347, 246, 28, 0, Math.PI * 2, false);
      ctx.fillStyle="#70547F";
      ctx.stroke();
      ctx.save();

		}


		 
		

		  function easeInOutQuad(t, b, c, d) {
			if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    		return -c/2 * ((t-=2)*t*t*t - 2) + b;
		};
			
  


}

draw();

Comments