cm85/LMFAO.markdown

## index.html
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background: black;
      }
      #container {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      var sw = 578;
      var sh = 400;
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 400
      });
      var layer = new Kinetic.Layer({
        y: -30
      });
      var leftEye = new Kinetic.Blob({
        x: 150,
        points: [0, 200, 50, 190, 100, 200, 50, 210],
        tension: 0.5,
        stroke: 'green',
        strokeWidth: 10
      });

      var rightEye = new Kinetic.Blob({
        x: sw - 250,
        points: [0, 200, 50, 190, 100, 200, 50, 210],
        tension: 0.5,
        stroke: 'green',
        strokeWidth: 10
      });

      var nose = new Kinetic.Spline({
        points: [240, 280, sw/2, 300, sw-240,280],
        tension: 0.5,
        stroke: 'green',
        strokeWidth: 10
      });

      var mouth = new Kinetic.Blob({
        points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
        tension: 0.5,
        stroke: 'red',
        strokeWidth: 10
      });
      layer.add(leftEye)
           .add(rightEye)
           .add(nose)
           .add(mouth);
      stage.add(layer);

      // tweens

      var leftEyeTween = new Kinetic.Tween({
        node: leftEye,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [0, 200, 50, 150, 100, 200, 50, 200]
      });

      var rightEyeTween = new Kinetic.Tween({
        node: rightEye,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [0, 200, 50, 150, 100, 200, 50, 200]
      });

      var noseTween = new Kinetic.Tween({
        node: nose,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [220, 280, sw/2, 200, sw-220,280]
      });

      var mouthTween = new Kinetic.Tween({
        node: mouth,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
      });
        var open = false;

        setInterval(function () {
            if (open) {
        leftEyeTween.reverse();
        rightEyeTween.reverse();
        noseTween.reverse();
        mouthTween.reverse();
        open = false;
            } else {
        leftEyeTween.play();
        rightEyeTween.play();
        noseTween.play();
        mouthTween.play();
        open = true;
            }
        }, 500)

    </script>

## LMFAO.markdown

      
    Raw
  

              LMFAO.markdown
            
          
    LMFAO

A Pen by Carlo Moscatiello on CodePen.
License.
	<style>
	body {
	margin: 0px;
	padding: 0px;
	background: black;
	}
	#container {
	background-color: black;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
	<script defer="defer">
	var sw = 578;
	var sh = 400;
	var stage = new Kinetic.Stage({
	container: 'container',
	width: 578,
	height: 400
	});
	var layer = new Kinetic.Layer({
	y: -30
	});
	var leftEye = new Kinetic.Blob({
	x: 150,
	points: [0, 200, 50, 190, 100, 200, 50, 210],
	tension: 0.5,
	stroke: 'green',
	strokeWidth: 10
	});

	var rightEye = new Kinetic.Blob({
	x: sw - 250,
	points: [0, 200, 50, 190, 100, 200, 50, 210],
	tension: 0.5,
	stroke: 'green',
	strokeWidth: 10
	});

	var nose = new Kinetic.Spline({
	points: [240, 280, sw/2, 300, sw-240,280],
	tension: 0.5,
	stroke: 'green',
	strokeWidth: 10
	});

	var mouth = new Kinetic.Blob({
	points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
	tension: 0.5,
	stroke: 'red',
	strokeWidth: 10
	});
	layer.add(leftEye)
	.add(rightEye)
	.add(nose)
	.add(mouth);
	stage.add(layer);

	// tweens

	var leftEyeTween = new Kinetic.Tween({
	node: leftEye,
	duration: 1,
	easing: Kinetic.Easings.ElasticEaseOut,
	y: -100,
	points: [0, 200, 50, 150, 100, 200, 50, 200]
	});

	var rightEyeTween = new Kinetic.Tween({
	node: rightEye,
	duration: 1,
	easing: Kinetic.Easings.ElasticEaseOut,
	y: -100,
	points: [0, 200, 50, 150, 100, 200, 50, 200]
	});

	var noseTween = new Kinetic.Tween({
	node: nose,
	duration: 1,
	easing: Kinetic.Easings.ElasticEaseOut,
	y: -100,
	points: [220, 280, sw/2, 200, sw-220,280]
	});

	var mouthTween = new Kinetic.Tween({
	node: mouth,
	duration: 1,
	easing: Kinetic.Easings.ElasticEaseOut,
	points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
	});
	var open = false;

	setInterval(function () {
	if (open) {
	leftEyeTween.reverse();
	rightEyeTween.reverse();
	noseTween.reverse();
	mouthTween.reverse();
	open = false;
	} else {
	leftEyeTween.play();
	rightEyeTween.play();
	noseTween.play();
	mouthTween.play();
	open = true;
	}
	}, 500)

	</script>