mvaz · January 18, 2013 06:45
diff --git a/eye.html b/eye.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Growing Pie</title>
        <link rel="stylesheet" href="demo.css" media="screen">
        <link rel="stylesheet" href="demo-print.css" media="print">
        <style media="screen">
        body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
 }
 #holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
 }
 #copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
 }
 #copy a {
    color: #fff;
 }

 path {
  stroke-width: 3;
 	stroke:       black;
 }

            #holder {
                height: 400px;
                margin: -200px 0 0 -200px;
                width: 400px;
            }
        </style>
        <script src="assets/js/raphael-2.1.0.js"></script>
        <script type="text/javascript">

 window.onload = function() {

    var c= Raphael("holder", 600, 500);
    // var p = c.path("M140 100");
    // var r = c.path("M190 60");

    
    var s1 = "M 50,300 C 150,200  200,300 250,300 Z";
    var s2 = "M 50,300 C 150,280  200,300 250,300 Z";
    var p2 = c.path(s1);
    var anim1 = Raphael.animation({path: s2}, 1e3);
    var anim2 = Raphael.animation({path: s1}, 1e3);

    // p.animate({path:"M140 100 L190 60"}, 2000, function() {
    //     r.animate({path:"M190 60 L 210 90"}, 2000);
    // });

 var getDelay = function() {
 	return 1e3 + Math.random() * 8e3;
 };
 var down = function() {
    p2.animate({path: s2}, 1e2, ">", up);
 };
 var up = function() {
 	f = function() {window.setTimeout(down, getDelay())};
 	p2.animate({path: s1}, 3e2, "<", f);
 };
 down();
 // console.log(anim1);
    
    // p2.animate(anim2.delay(700).repeate(4), 5000, function(){console.log("kaka");	});

 	    	// p2.animate(anim2, 3000, function(){}); 
 };

       </script>
    </head>
    <body>
        <div id="holder"></div>   
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Raphaël · Growing Pie</title>
	<link rel="stylesheet" href="demo.css" media="screen">
	<link rel="stylesheet" href="demo-print.css" media="print">
	<style media="screen">
	body {
	background: #333;
	color: #fff;
	font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
	}
	#holder {
	height: 480px;
	left: 50%;
	margin: -240px 0 0 -320px;
	position: absolute;
	top: 50%;
	width: 640px;
	}
	#copy {
	bottom: 0;
	font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
	position: absolute;
	right: 1em;
	text-align: right;
	}
	#copy a {
	color: #fff;
	}

	path {
	stroke-width: 3;
	stroke: black;
	}

	#holder {
	height: 400px;
	margin: -200px 0 0 -200px;
	width: 400px;
	}
	</style>
	<script src="assets/js/raphael-2.1.0.js"></script>
	<script type="text/javascript">

	window.onload = function() {

	var c= Raphael("holder", 600, 500);
	// var p = c.path("M140 100");
	// var r = c.path("M190 60");


	var s1 = "M 50,300 C 150,200 200,300 250,300 Z";
	var s2 = "M 50,300 C 150,280 200,300 250,300 Z";
	var p2 = c.path(s1);
	var anim1 = Raphael.animation({path: s2}, 1e3);
	var anim2 = Raphael.animation({path: s1}, 1e3);

	// p.animate({path:"M140 100 L190 60"}, 2000, function() {
	// r.animate({path:"M190 60 L 210 90"}, 2000);
	// });

	var getDelay = function() {
	return 1e3 + Math.random() * 8e3;
	};
	var down = function() {
	p2.animate({path: s2}, 1e2, ">", up);
	};
	var up = function() {
	f = function() {window.setTimeout(down, getDelay())};
	p2.animate({path: s1}, 3e2, "<", f);
	};
	down();
	// console.log(anim1);

	// p2.animate(anim2.delay(700).repeate(4), 5000, function(){console.log("kaka"); });

	// p2.animate(anim2, 3000, function(){});
	};

	</script>
	</head>
	<body>
	<div id="holder"></div>
	</body>
	</html>
No results found