IO

       <script>    
            var ctx=document.getElementById('io').getContext('2d');
            var LUCHI1X = [210, 237, 230, 190, 200, 221, 231, 243, 238, 326, 399, 345, 341, 379, 349, 320, 429, 325, 327, 379, 315, 332, 362, 325, 264, 257, 231, 200, 185, 183, 100, 30, 75, 47, 0, 41, 40, 25, 43, 80, 42, 107, 123, 132, 148];
            var LUCHI1Y = [90, 5, 92, 115, 47, 114, 92, 60, 94, 150, 134, 180, 173, 169, 190, 228, 241, 254, 292, 326, 320, 341, 364, 350, 384, 462, 395, 411, 500, 410, 360, 398, 339, 300, 287, 274, 239, 226, 218, 180, 103, 160, 109, 92, 98 ];
 
            var LUCHI2X = [191, 201, 222, 280, 389, 285, 297, 349, 285, 259, 252, 226, 130, 60, 105, 105, 67, 132, 256, 278, 273, 84, 55, 89];
            var LUCHI2Y = [139, 71, 138, 228, 241, 254, 282, 316, 310, 354, 432, 365, 330, 368, 309, 220, 133, 190, 146, 135, 170, 270, 250, 240];
 
             var LUCHI3X = [114, 95, 139, 270, 283, 139, 270, 283, 139, 150, 139, 180];
            var LUCHI3Y = [250, 230, 210, 197, 174, 210, 300, 320, 300, 300, 340, 305];
 
 
            //Первый слой тела
            ctx.beginPath();
            ctx.arc(200,250,160,0,2*Math.PI);
            ctx.fillStyle="#a1dbff";
            ctx.fill();
            ctx.lineWidth=0.7;
            ctx.stroke();
 
            for ( var i = 0; i < LUCHI1X.length; i += 3 ){
                ctx.beginPath();
                ctx.moveTo(LUCHI1X[i],LUCHI1Y[i]);
                ctx.lineTo(LUCHI1X[i+1],LUCHI1Y[i+1]);
                ctx.lineTo(LUCHI1X[i+2],LUCHI1Y[i+2]);
                ctx.lineWidth=1.5;
                ctx.stroke();
                ctx.fillStyle="#a1dbff";            
                ctx.fill();
            }
 
            //второй слой тела
               ctx.beginPath();
                ctx.arc(200,250,120,0,2*Math.PI);
                ctx.fillStyle="#bbe4ff";
                ctx.fill();
 
                for ( var i = 0; i < LUCHI2X.length; i += 3 ){
                    ctx.beginPath();
                    ctx.moveTo(LUCHI2X[i],LUCHI2Y[i]);
                    ctx.lineTo(LUCHI2X[i+1],LUCHI2Y[i+1]);
                    ctx.lineTo(LUCHI2X[i+2],LUCHI2Y[i+2]);
                    ctx.fillStyle='#bbe4ff';            
                    ctx.fill();
                }
 
 
         //третий слой тела   
           ctx.beginPath();
            ctx.arc(200,250,87,0,2*Math.PI);
            ctx.fillStyle="#d3edff";
            ctx.fill(); 
 
            for ( var i = 0; i < LUCHI3X.length; i += 3 ){
                    ctx.beginPath();
                    ctx.moveTo(LUCHI3X[i],LUCHI3Y[i]);
                    ctx.lineTo(LUCHI3X[i+1],LUCHI3Y[i+1]);
                    ctx.lineTo(LUCHI3X[i+2],LUCHI3Y[i+2]);
                    ctx.fillStyle="#d3edff";           
                    ctx.fill();
                }
 
 
        //четвертый слой тела   
        ctx.beginPath();
            ctx.arc(200,250,47,0,2*Math.PI);
            ctx.fillStyle="#e9f6ff";
            ctx.fill();
 
        //глаза
            ctx.save();
            ctx.scale(0.65, 1);
 
            ctx.beginPath();
            ctx.arc(240, 240, 24, 0, Math.PI*2, false);
            ctx.lineWidth=2.5;
            ctx.stroke();
            ctx.closePath();
            ctx.fillStyle="#fff";
            ctx.fill();
 
            ctx.beginPath();
            ctx.arc(380, 240, 24, 0, Math.PI*2, false);
            ctx.lineWidth=2.5;
            ctx.stroke();
            ctx.closePath();
            ctx.fillStyle="#fff";
            ctx.fill();
 
            ctx.restore();
 
        //внутреняя часть глаз    
 
            ctx.save();
            ctx.scale(0.7,1);
 
            ctx.beginPath();
            ctx.arc(225, 237, 15, 0, Math.PI*2, false);
 
            ctx.closePath();
            ctx.fillStyle="#00a8e7";
            ctx.fill();
 
            ctx.beginPath();
            ctx.arc(355, 237, 15, 0, Math.PI*2, false);
 
 
            ctx.closePath();
            ctx.fillStyle="#00a8e7";
            ctx.fill();
 
            ctx.beginPath();
            ctx.arc(280,275,19,0,Math.PI);
            ctx.fillStyle="#000000";
            ctx.fill();
 
        //ротик     
            ctx.beginPath();
            ctx.arc(283,275,13,0,Math.PI);
            ctx.fillStyle="#FD627F";
            ctx.fill();
 
            ctx.restore();
 
      //реснички 
            //Правые
            ctx.beginPath();
            ctx.arc(250,210,13,0,(Math.PI)/3);
            ctx.stroke();
 
            ctx.beginPath();
            ctx.arc(247.5,208,13,0,(Math.PI)/3);
            ctx.stroke();
 
            //Левые
            ctx.beginPath();
            ctx.arc(150,210,13,90,Math.PI);
            ctx.stroke();
 
            ctx.beginPath();
            ctx.arc(153,209,13,90,Math.PI);
            ctx.stroke();
 
 
            var imgData=ctx.getImageData(0,0,500,500);
 
            var y1=250,x1=310,k=-1,dx=15,dy=15;        
            var y2=300,x2=150,dx2=15,dy2=15; 
            var x3=110,y3=200,dx3=15,dy3=15;    
            var lev=154,prav=244,dl=1;
 
            var radius=15;
            var baseX=200;
            var baseY=250;
            var currAng1=15;
            var currAng2=0;
 
        function Draw(){
            ctx.putImageData(imgData,0,0);
 
 
         //зрачки   
            ctx.beginPath();
            if( lev == 163 && prav == 253  ){
                dl=-dl;
            }
            if( lev == 153 && prav == 243 ){
                dl=-dl;
            }
 
            lev=lev+dl;
            prav=prav+dl;
 
            ctx.arc(lev,235,5,0,Math.PI*2);
            ctx.arc(prav,235,5,0,Math.PI*2);
 
            ctx.fillStyle="#000000";
            ctx.fill();
 
         //какие-то кругляшки   
            ctx.beginPath();
            if( y1 <= 0 ){
                y1=250;
            }
            //первые
            y1=y1-dy;
            x1=x1+k*dx;          
            dx=dx*k;            
            ctx.arc(x1,y1,7,0,Math.PI*2);
            ctx.fillStyle="rgba(98,214,253,0.5)";
            ctx.fill();
 
 
            //вторые
            ctx.beginPath();
 
            if( y2 <= 0){
                y2=300;
            }            
            y2=y2-dy2;            
            x2=x2+k*dx2;
            dx2=dx2*k;
            ctx.arc(x2,y2,9,0,Math.PI*2);             
            ctx.fillStyle="rgba(98,214,253,0.5)";
            ctx.fill();
 
            //третьи
            ctx.beginPath();
 
            if( y3 <= 0){
                y3=200;
            }            
            y3=y3-dy3;            
            x3=x3+k*dx3;
            dx3=dx3*k;
            ctx.arc(x3,y3,9,0,Math.PI*2);             
            ctx.fillStyle="rgba(98,214,253,0.5)";
            ctx.fill();  
 
            //шарики еще одни
            ctx.beginPath();
 
            var vx1=13*Math.cos(currAng1)*radius;
            var vy1=15*Math.sin(currAng1)*radius;
            ctx.arc(baseX+vx1,baseY+vy1,radius,0,Math.PI*2);
 
            var vx2=17*Math.cos(currAng2)*radius;
            var vy2=13*Math.sin(currAng2)*radius;
            ctx.arc(baseX+vx2,baseY+vy2,radius,0,Math.PI*2);
 
            ctx.fillStyle="rgba(98,214,253,0.5)";
            ctx.fill();
            currAng1=currAng1+0.25;
            currAng2=currAng2-0.13;
 
            setTimeout(Draw,70);
 
        }
 
            setTimeout(Draw,70);
 
            for(var i=0;i<=500;i++){
                ctx.beginPath();
                ctx.moveTo(0,i);
                ctx.lineTo(500,i);
                i=i+50
            }
            for(var i=0;i<=500;i++){
                ctx.beginPath();
                ctx.moveTo(i,0);
                ctx.lineTo(i,500);
                i=i+50
            }
 
 
 
 
            </script>